विषय

• कदम बढ़ाने के लिए
• विधि 1 की 4: एक ठोस पृष्ठभूमि रंग सेट करना
• विधि 2 की 4: पृष्ठभूमि के रूप में चित्र का उपयोग करना
• विधि 3 की 4: एक ढाल पृष्ठभूमि बनाएँ
• विधि 4 की 4: वॉलपेपर के रूप में एक रंगीन एनीमेशन सेट करें

HTML में एक वेब पेज की पृष्ठभूमि सेट करने में सक्षम होने के लिए, आपको बस "बॉडी" तत्व में एक छोटा सा बदलाव करना होगा। शैली> / शैली> टैग। चरण इस बात पर निर्भर करते हैं कि आप अपने वॉलपेपर को कैसे देखना चाहते हैं। अपनी वेबसाइट की पृष्ठभूमि को ठोस रंग, छवि, ढाल या रंग एनीमेशन के रूप में सेट करना सीखें।

कदम बढ़ाने के लिए

विधि 1 की 4: एक ठोस पृष्ठभूमि रंग सेट करना

1. अपने पसंदीदा टेक्स्ट एडिटर में अपनी HTML फ़ाइल खोलें। HTML5 के रूप में, HTML विशेषता bgcolor> अब समर्थित नहीं है। आपके पृष्ठ के अन्य सभी शैली पहलुओं की तरह पृष्ठभूमि का रंग, सीएसएस के साथ सेट होना चाहिए।
2. जोड़ें शैली> / शैली> आपके दस्तावेज़ को टैग करता है। आपके पृष्ठ (पृष्ठभूमि रंग सहित) के लिए सभी शैली डेटा इन टैग के भीतर एन्कोडेड होना चाहिए। क्या आपके पास है शैली> पहले से इंगित किए गए टैग, फिर आप फ़ाइल के उस हिस्से पर स्क्रॉल कर सकते हैं।

   ! DOCTYPE html> html> सिर> शैली> / शैली> / सिर> / html>

3. अंदर "बॉडी" तत्व टाइप करें शैली> / शैली> टैग। सीएसएस में आप "बॉडी" तत्व में जो भी बदलाव करते हैं, वह पूरे पृष्ठ को प्रभावित करेगा।

   ! DOCTYPE html> html> सिर> शैली> शरीर {} / शैली> / सिर> शरीर> / शरीर> / html>

4. "पृष्ठभूमि-रंग" गुण को "शरीर" तत्व में जोड़ें। इस संदर्भ में "रंग" की केवल एक वर्तनी काम करेगी (नहीं: रंग)।

   ! DOCTYPE html> html> सिर> शैली> शरीर {पृष्ठभूमि-रंग:} / शैली> / सिर> शरीर> / शरीर> / html>

5. "पृष्ठभूमि-रंग" के पीछे वांछित पृष्ठभूमि रंग रखें। अब आप एक रंग का नाम इंगित कर सकते हैं (हरा, नीला, ईडी, आदि), हेक्साडेसिमल (हेक्स) कोड (पूर्व) का उपयोग करें। #000000 काले रंग के लिए, # ff0000 लाल के लिए, आदि) या आरजीबी मूल्य में रंग के लिए टाइप करके (जैसे कि आरजीबी (255,255,0) पीले रंग के लिए)। नीचे हेक्साडेक्सिमल कोड के साथ एक उदाहरण दिया गया है, जो पृष्ठभूमि को विकीहो बैनर के समान बनाता है:

   DOCTYPE html> html> सिर> शैली> शरीर {पृष्ठभूमि-रंग: # 93B874; } / शैली> / सिर> शरीर> / शरीर> / html>

   • सफेद: # फाफ
   • हल्का गुलाबू: # FFCCE6
   • गहरे ब्राउन रंग का: #993300
   • इंडिगो - # 4B0082
   • वायलेट - # EE82EE
   • किसी भी रंग के हेक्स कोड को खोजने के लिए w3schools.com HTML कलर पिकर देखें।
6. अन्य तत्वों के लिए पृष्ठभूमि रंग लागू करने के लिए "पृष्ठभूमि-रंग" का उपयोग करें। जैसे आप बॉडी एलिमेंट सेट करते हैं, वैसे ही आप अन्य एलिमेंट्स का बैकग्राउंड सेट करने के लिए बैकग्राउंड-कलर का इस्तेमाल कर सकते हैं। बस उन तत्वों को भीतर रखें शैली> / शैली> पृष्ठभूमि-रंग संपत्ति के साथ।

   DOCTYPE html> html> सिर> शैली> शरीर {पृष्ठभूमि-रंग: # 93B874; } h1 {पृष्ठभूमि-रंग: नारंगी; } पी {पृष्ठभूमि-रंग: आरजीबी (255,0,0); )

विधि 2 की 4: पृष्ठभूमि के रूप में चित्र का उपयोग करना

1. टेक्स्ट एडिटर में HTML फाइल खोलें। बहुत से लोग अपनी वेबसाइट के लिए पृष्ठभूमि के रूप में एक छवि का उपयोग करना पसंद करते हैं। इसके साथ आप पृष्ठभूमि के रूप में एक पैटर्न, बनावट, फोटो या किसी अन्य छवि को सेट कर सकते हैं। HTML5 से, सभी बैकग्राउंड को CSS (कैस्केडिंग स्टाइल शीट्स) के साथ सेट किया जाना चाहिए शैली> / शैली> टैग।
2. जोड़ें शैली> / शैली> आपके HTML फ़ाइल में टैग। आपके पृष्ठ (पृष्ठभूमि रंग सहित) के लिए सभी शैली डेटा को इन टैग के भीतर इंगित किया जाना चाहिए। क्या आपके पास पहले से है शैली> टैग सेट, फ़ाइल के उस हिस्से पर स्क्रॉल करें।

   ! DOCTYPE html> html> सिर> शैली> / शैली> / सिर> / html>

3. अंदर "बॉडी" तत्व टाइप करें शैली> / शैली> टैग। सीएसएस में आप "बॉडी" तत्व में जो भी बदलाव करते हैं, वह पूरे पृष्ठ को प्रभावित करेगा।

   ! DOCTYPE html> html> सिर> शैली> शरीर {} / शैली> / सिर> शरीर> / शरीर> / html>

4. "पृष्ठभूमि-छवि" संपत्ति को "शरीर" तत्व में जोड़ें। इस संपत्ति को जोड़ते समय आपको अपनी छवि के फ़ाइल नाम की आवश्यकता होगी। सुनिश्चित करें कि छवि उसी फ़ोल्डर में HTML फ़ाइल के रूप में सहेजी गई है (या अपने वेब सर्वर पर फ़ाइल में पूर्ण पथ जोड़ें)।

   DOCTYPE html> html> हेड> स्टाइल> बॉडी {बैकग्राउंड-इमेज: url ("Imagename.png"); पृष्ठभूमि-रंग: # 93B874; } / शैली> / सिर> शरीर> / शरीर> / html>

   • कोड को शामिल करना एक अच्छा विचार है पीछे का रंग अगर पृष्ठभूमि छवि लोड नहीं होगी तो बस।
5. कई छवियों परत। आप एक दूसरे के ऊपर कई छवियों को ढेर कर सकते हैं। यह उपयोगी हो सकता है यदि आपके पास पारदर्शी पृष्ठभूमि वाली छवियां हैं जो सुपरम्पोज़ किए जाने पर एक दूसरे के पूरक हैं।

   ! DOCTYPE html> html> सिर> शैली> शरीर {पृष्ठभूमि-छवि: url ("image1.png"), url ("image2.gif"); पृष्ठभूमि-रंग: # 93B874; } / शैली> / सिर> शरीर> / शरीर> / html>

   • पहली छवि शीर्ष पर है। दूसरी छवि पहले से नीचे है।

विधि 3 की 4: एक ढाल पृष्ठभूमि बनाएँ

1. ग्रेडिएंट बैकग्राउंड बनाने के लिए CSS का उपयोग करें। यदि आप एक ठोस रंग की तुलना में कुछ अधिक स्टाइल के लिए देख रहे हैं, लेकिन रंग एनीमेशन के रूप में व्यस्त नहीं है, तो एक ढाल पृष्ठभूमि का प्रयास करें। ग्रेडर ऐसे रंग हैं जो अन्य समानताओं में बदलते हैं। आप अपनी ढाल बनाने और समायोजित करने के लिए CSS का उपयोग कर सकते हैं। इससे पहले कि आप एक रंग ढाल बनाना शुरू करें, आपको सीएसएस के साथ एक वेब पेज को तैयार करने की मूल जानकारी का पर्याप्त ज्ञान प्राप्त करना चाहिए।
2. मानक वाक्यविन्यास को समझें। एक ढाल बनाते समय, जानकारी के दो टुकड़े होते हैं जिनकी आपको आवश्यकता होगी: शुरुआती बिंदु और शुरुआती कोण, और रंग जिनके बीच संक्रमण होगा। आप कई रंगों का चयन कर सकते हैं जो सभी ओवरलैप करते हैं, और आप ढाल के लिए एक दिशा या कोण निर्दिष्ट कर सकते हैं।

   पृष्ठभूमि: रैखिक-ढाल (दिशा / कोण, color1, color2, color3, आदि);

3. एक ऊर्ध्वाधर ढाल बनाएं। यदि आप एक दिशा नहीं दिखाते हैं, तो रंग ऊपर से नीचे तक चलेगा। अलग-अलग ब्राउज़रों के ग्रेडिएंट फ़ंक्शन के विभिन्न संस्करण हैं, इसलिए आपको कोड के विभिन्न संस्करणों को जोड़ना होगा।

   DOCTYPE html> html> सिर> शैली> html {न्यूनतम-ऊंचाई: 100%; / * यह सुनिश्चित करने के लिए आवश्यक है कि ग्रेडिएंट पूरे पृष्ठ को फैलाता है। / * क्रोम 10+, सफारी 5.1+ * / पृष्ठभूमि: -o-रैखिक-ढाल (# 93B874, # C9DCB9); / * ओपेरा 11.1+ * / पृष्ठभूमि: -Moz- रैखिक-ढाल (# 93B874, # C9DCB9); / * फ़ायरफ़ॉक्स 3.6+ * / पृष्ठभूमि: रैखिक-ढाल (# 93B874, # C9DCB9); / * डिफ़ॉल्ट सिंटैक्स (अंतिम होना चाहिए) * / पृष्ठभूमि-रंग: # 93B874; / * पृष्ठभूमि रंग सेट करने के लिए यह एक अच्छा विचार है, अगर ग्रेडर लोड नहीं करता है तो * * /} / शैली> / सिर> शरीर> / शरीर> / html>

4. एक दिशा के साथ एक ढाल बनाएं। ग्रेडिएंट के लिए एक दिशा जोड़ने से आप रंग की शिफ्ट के तरीके को समायोजित कर सकते हैं। ध्यान दें कि विभिन्न ब्राउज़र अलग-अलग दिशाओं की व्याख्या करेंगे। वे सभी एक ही रंग ढाल दिखाएंगे।

   DOCTYPE html> html> सिर> शैली> html {न्यूनतम-ऊंचाई: 100%; } शरीर {पृष्ठभूमि: -webkit- रैखिक-ढाल (बाएं, # 93B874, # C9DCB9); / * बाएं से दाएं _ / पृष्ठभूमि: -o-रैखिक-ढाल (दाएं, # 93B874, # C9DCB9); / * दाईं ओर / * बैकग्राउंड: / -मोज़-लीनियर-ग्रेडिएंट (दाएं, # 93B874, # C9DCB9); / * दाईं ओर समाप्त होता है * / पृष्ठभूमि: रैखिक-ढाल (दाईं ओर, # 93B874, # C9DC9); / * दाईं ओर ले जाता है * / पृष्ठभूमि-रंग: # 93B874; / * पृष्ठभूमि रंग सेट करने के लिए यह एक अच्छा विचार है, अगर ग्रेडिएंट लोड नहीं होगा, तो * * /} / शैली> / सिर> शरीर> / शरीर> / html>

5. ढाल को समायोजित करने के लिए अन्य गुणों का उपयोग करें। आप ग्रेडिएंट्स के साथ बहुत कुछ कर सकते हैं।
   • उदाहरण के लिए, आप न केवल दो से अधिक रंगों का उपयोग कर सकते हैं, बल्कि प्रत्येक के पीछे एक प्रतिशत भी रख सकते हैं। इससे आप संकेत कर सकते हैं कि प्रत्येक रंग खंड को कितना स्थान मिलेगा।

     पृष्ठभूमि: रैखिक-ढाल (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • रंगों में पारदर्शिता जोड़ें। इससे आप रंगों को फीका कर सकते हैं। रंग से फीका करने के लिए एक ही रंग का प्रयोग करें। आपको फंक्शन अच्छा लगेगा आरजीबीए () रंग इंगित करने के लिए उपयोग करना चाहिए। अंतिम मान पारदर्शिता की डिग्री निर्धारित करता है: 0 अपारदर्शी के लिए और 1 पारदर्शी के लिए।

     पृष्ठभूमि: रैखिक ढाल (दाईं ओर, आरजीबीए (147,184,116.0), आरजीबीए (147,184,116.1));

विधि 4 की 4: वॉलपेपर के रूप में एक रंगीन एनीमेशन सेट करें

1. पर जाए शैली> अपने HTML कोड में। यदि आप एक ठोस पृष्ठभूमि रंग पाते हैं, लेकिन बदलते रंग पृष्ठभूमि के साथ प्रयोग नहीं करते हैं। HTML 5 से, बैकग्राउंड रंगों को CSS (कैस्केडिंग स्टाइल शीट्स) के साथ परिभाषित किया जाना चाहिए। यदि आपने CSS के साथ पृष्ठभूमि रंग कभी सेट नहीं किया है, तो इस विधि को आज़माने से पहले एक ठोस पृष्ठभूमि रंग सेट करने पर अनुभाग पढ़ें।
2. संपत्ति जोड़ें एनीमेशन "शरीर" तत्व के लिए। आपको 2 विभिन्न गुणों को जोड़ना होगा, क्योंकि प्रत्येक ब्राउज़र को अलग कोड की आवश्यकता होती है।

   ! DOCTYPE html> html> हेड> स्टाइल> बॉडी {-webkit- एनिमेशन: colorchange 60s infinite; एनिमेशन: colorchange 60s अनंत; } / शैली> / सिर> शरीर> / शरीर> / html>

   • -webkit- एनीमेशन संपत्ति क्रोम-आधारित ब्राउज़र (क्रोम, ओपेरा, सफारी) के लिए आवश्यक है। एनीमेशन अन्य सभी ब्राउज़रों के लिए मानक है।
   • रंग परिवर्तन इस उदाहरण में एनीमेशन को क्या कहा जाता है।
   • 60 के दशक एनीमेशन / संक्रमण की अवधि (60 सेकंड) है। वेबकिट और डिफ़ॉल्ट सिंटैक्स दोनों के लिए इसे सेट करना सुनिश्चित करें।
   • अनंत इंगित करता है कि एनीमेशन को अनिश्चित काल तक दोहराना चाहिए। यदि आप रंगों को लूप करना पसंद करते हैं और फिर अंतिम रंग पर रोकते हैं, तो आप इस हिस्से को छोड़ सकते हैं।
3. अपने एनीमेशन में रंग जोड़ें। अब आप पृष्ठभूमि पर जाने के लिए @keyframes नियम का उपयोग करने जा रहे हैं, साथ ही पृष्ठ पर प्रत्येक रंग कितने समय तक देखा जा सकता है। फिर से, आपको विभिन्न ब्राउज़रों के लिए कई एनकोडिंग जोड़ना होगा।

   ! DOCTYPE html> html> हेड> स्टाइल> बॉडी {-webkit- एनिमेशन: colorchange 60s infinite; एनिमेशन: colorchange 60s अनंत; } @ -webkit-keyframes colorchange {0% {पृष्ठभूमि: # 33FFF3;} 25% {पृष्ठभूमि: # 78281F;} 50% {पृष्ठभूमि: # 117A65;} 75% {पृष्ठभूमि: # DC7633;} 100% {पृष्ठभूमि: # 9B59B6;}} @keyframes colorchange {0% {पृष्ठभूमि: # 33FFF3;} 25% {पृष्ठभूमि: # 78281F;} 50% {पृष्ठभूमि: # 117A65;} 75% {पृष्ठभूमि: # DC7633;} 100% {पृष्ठभूमि: # 9B59B6;}} / शैली> / सिर> शरीर> / शरीर> / html>

   • ध्यान दें कि दो लाइनें (@ -webkit- कीफ्रेम तथा @keyframes पृष्ठभूमि रंग और प्रतिशत के लिए समान मान हैं। यह समान रहना चाहिए ताकि सभी ब्राउज़रों के लिए अनुभव समान रहे।
   • प्रतिशत (0%, 25%, आदि) एनीमेशन की कुल अवधि का प्रतिनिधित्व करते हैं (60 के दशक) का है। जब पृष्ठ लोड होता है, तो पृष्ठभूमि में रंग सेट होना चाहिए 0% तथा (# 33FFF3) का है। जब एनीमेशन का 25% या 60 सेकंड खेला गया है, तो पृष्ठभूमि संक्रमण कर देगी # 78281F, और इसी तरह।
   • आप इच्छानुसार अवधि और रंगों को समायोजित कर सकते हैं।