जीआईएफ सेट करना ' ग्राफिक्स बदलाव प्रारूप ” एक पृष्ठभूमि छवि के रूप में डिजाइन के लिए एक आकर्षक आकर्षक तत्व जोड़ता है। जीआईएफ डेवलपर्स को जानकारी देने या किसी उत्पाद या सेवा को हाइलाइट करने की अनुमति देता है जो ब्रांड की दृश्य पहचान बनाने में मदद करता है। हालाँकि, डेवलपर्स को यह सुनिश्चित करना चाहिए कि GIF का उपयोग वेबपेज को अभिभूत न करे या उपयोगकर्ता को मुख्य सामग्री से विचलित न करे।
यह आलेख वेबपृष्ठ पर पृष्ठभूमि छवि के रूप में GIF सेट करने की प्रक्रिया को प्रदर्शित करता है।
वेबपेज पर GIF को बैकग्राउंड इमेज के रूप में कैसे सेट करें?
GIF को पृष्ठभूमि छवि के रूप में सेट करने से विज़ुअल तत्वों को जोड़कर आकर्षक तत्व बनाने में मदद मिलती है।
जीआईएफ उन वेबसाइटों पर विशेष रूप से उपयोगी होते हैं जो चंचलता या सनक की भावना व्यक्त करना चाहते हैं, या उन पृष्ठों पर जो किसी विशेष उत्पाद या सुविधा को हाइलाइट करना चाहते हैं। इसे स्थापित करने के लिए, एक पृष्ठभूमि छवि के रूप में निम्नलिखित उदाहरणों पर जाएँ:
उदाहरण 1: जीआईएफ को एक निश्चित पृष्ठभूमि के रूप में सेट करना
जैसा कि HTML तत्व जो वेबपेज की सामग्री के निर्माण में मदद करते हैं, उन्हें “के अंदर रखा जाता है” <शरीर> ' उपनाम। इसीलिए, 'का चयन करना शरीर ”तत्व और उस पर CSS गुण लागू करना। यह “के सभी युक्त HTML तत्वों को प्रभावित करता है <शरीर> ' उपनाम।
उदाहरण के लिए, ' <एच1> ' और ' ” टैग का उपयोग वेबपेज की सामग्री के रूप में किया जाता है। नीचे दिए गए कोड स्निपेट को देखें:
< शरीर >
< एच 1 > जीआईएफ सेट करना जैसा पृष्ठ पर एक पृष्ठभूमि छवि एच 1 >
< पी > यह जीआईएफ जोड़ा गया है जैसा पूरे पृष्ठ पर एक पृष्ठभूमि छवि का उपयोग कर 'पृष्ठभूमि छवि' संपत्ति। यह आलेख Linuxhint द्वारा संचालित किया गया है। पी >
शरीर >
अब, 'बॉडी' HTML एलिमेंट को '' के अंदर चुनें। <शैली> 'टैग या एक अलग में' सीएसएस ” फ़ाइल वेबपेज पर स्टाइल लागू करने के लिए:
पृष्ठभूमि-छवि: url ( 'समुद्र.gif' ) ;
बैकग्राउंड-रिपीट: नो-रिपीट;
बैकग्राउंड-साइज़: कवर;
पैडिंग: 50 पीएक्स;
फॉन्ट-साइज़: x-लार्ज;
रंग सफेद;
}
उपरोक्त कोड ब्लॉक में:
-
- पहले ' यूआरएल () 'विधि का उपयोग किया जाता है जो' के पथ को संग्रहीत करता है जीआईएफ ' फ़ाइल। और यह विधि CSS के मान के रूप में पारित की जाती है ” पृष्ठभूमि छवि ' संपत्ति।
- अगला, सेट करें ' कोई दोहराने 'सीएसएस के मूल्य के रूप में' पृष्ठभूमि दोहराएँ GIF फ़ाइल की पुनरावृत्ति के लिए गुण।
- फिर, का मान सेट करें ' ढकना 'सीएसएस के लिए' पृष्ठभूमि-आकार ” संपत्ति सभी उपलब्ध स्थान को कवर करने के लिए
- उसके बाद, का मान प्रदान करें ' 50 पीएक्स ' और ' एक्स बड़े 'सीएसएस के लिए' गद्दी ' और ' फ़ॉन्ट आकार ' गुण, क्रमशः। यह पाठ के चारों ओर रिक्ति जोड़ता है और फ़ॉन्ट आकार को बढ़ाता है।
संकलन के बाद वेबपेज इस तरह दिखता है:
उपरोक्त आउटपुट से पता चलता है कि वेबपेज पर पृष्ठभूमि के रूप में एक GIF जोड़ा गया है।
उदाहरण 2: GIF को स्क्रॉल करने योग्य पृष्ठभूमि के रूप में सेट करना
प्रारंभ में, इस तरह वेबपृष्ठ सामग्री बनाने के लिए एक HTML संरचना बनाएँ:
< डिव कक्षा = 'कोंटाई' >< एच 1 > जीआईएफ सेट करना जैसा पृष्ठ पर एक पृष्ठभूमि छवि एच 1 >
< पी > यह जीआईएफ जोड़ा गया है जैसा का उपयोग करके पूरे पृष्ठ पर एक पृष्ठभूमि छवि 'पृष्ठभूमि छवि' संपत्ति। यह आलेख Linuxhint द्वारा संचालित किया गया है। पी >
डिव >
< डिव >
< h3 शैली = 'रंग सफेद;' > के बाहर लिखी गई सामग्री 'डिव' तत्व h3 >
डिव >
उपरोक्त कोड में:
-
- सबसे पहले, अभिभावक ' <दिव> ” टैग का उपयोग “की श्रेणी के साथ किया जाता है रोकना ”।
- अगला, उपयोग करें ' एच 1 ' और ' पी “HTML तत्वों और उन्हें डमी सामग्री प्रदान करें।
- उसके बाद, दूसरा बनाएँ ' <दिव> 'और' का उपयोग करें <एच3> इसे डमी डेटा प्रदान करके टैग करें।
अब, निम्न CSS गुणों को सम्मिलित करके GIF को वेब पेज पर पृष्ठभूमि के रूप में जोड़ें:
.contai {पृष्ठभूमि-छवि: url ( समुद्र.gif ');
बैकग्राउंड-रिपीट: नो-रिपीट;
बैकग्राउंड-साइज़: कवर;
ऊंचाई: 100 वीएच;
डिस्प्ले: फ्लेक्स;
संरेखित-आइटम: केंद्र;
औचित्य-सामग्री: केंद्र;
फ्लेक्स-दिशा: कॉलम;
रंग सफेद;
फ़ॉन्ट-आकार: बड़ा;
पाठ-संरेखण: केंद्र;
गद्दी: 2रेम;
}
उपरोक्त उपयोग किए गए कोड ब्लॉक का विवरण:
-
- सबसे पहले, 'सेट करें' छवि पथ ”, “ कोई दोहराने टी' और ' ढकना 'सीएसएस के मूल्य के रूप में' पृष्ठभूमि छवि ”, “ पृष्ठभूमि दोहराएँ ' और ' पृष्ठभूमि-आकार ' गुण, क्रमशः।
- अगला, का मान सेट करें ' 100वीएच ' और ' मोड़ना 'सीएसएस के लिए' ऊंचाई ' और ' दिखाना ' गुण।
- उसके बाद, CSS का उपयोग करें ” रंग ”, “ फ़ॉन्ट आकार ”, “ पाठ संरेखित ' और ' गद्दी सामग्री पर स्टाइल लागू करने के लिए गुण।
संकलन प्रक्रिया के अंत के बाद, वेबपेज इस तरह दिखता है:
आउटपुट प्रदर्शित करता है कि ' जीआईएफ ” को पूरे पृष्ठ पर पृष्ठभूमि छवि के रूप में डाला गया है।
निष्कर्ष
GIF को वेबपृष्ठ पर पृष्ठभूमि छवि के रूप में सेट करने के लिए, CSS “ पृष्ठभूमि छवि “संपत्ति का उपयोग HTML पर किया जाता है” शरीर ' तत्व। सीएसएस संपत्ति जो 'बॉडी' तत्व पर लागू होती है, स्वचालित रूप से सभी तत्वों पर लागू होती है। सेट करके ' 100वीएच ” ऊंचाई संपत्ति के मूल्य के रूप में, स्क्रॉलिंग प्रभाव को भी सक्षम किया जा सकता है। यह बैकग्राउंड जिफ को स्क्रॉल के साथ चलने की अनुमति देता है। इस लेख ने प्रदर्शित किया है कि वेबपेज पर GIF को पृष्ठभूमि छवि के रूप में कैसे सेट किया जाए।