आप सोच सकते हैं कि पृष्ठभूमि का डिज़ाइन सरल है, लेकिन CSS में आपके सीखने के लिए कई अस्पष्ट और शक्तिशाली गुण हैं।

आपकी वेबसाइट की पृष्ठभूमि थीम इसके रंग-रूप को महत्वपूर्ण रूप से प्रभावित कर सकती है। रंग, चित्र और पृष्ठभूमि पैटर्न भावनाओं का आह्वान करते हैं और महान उपयोगकर्ता अनुभव बनाते हैं।

HTML तत्वों की पृष्ठभूमि शैली सेट करने के लिए आप CSS पृष्ठभूमि गुणों का उपयोग कर सकते हैं। उत्कृष्ट पृष्ठभूमि बनाने के लिए आप जिन सीएसएस संपत्तियों का उपयोग कर सकते हैं, उनके बारे में जानें।

1. पृष्ठभूमि का रंग

पृष्ठभूमि-रंग संपत्ति किसी तत्व की पृष्ठभूमि का रंग सेट करता है। आप "लाल" जैसे नाम, "#00FF00" जैसे HEX मान या "rgb (0, 255, 0)" जैसे RGB मान का उपयोग करके रंग सेट कर सकते हैं। आप रंग, संतृप्ति और लपट का उपयोग करके पृष्ठभूमि रंग सेट करने के लिए HSL मान का भी उपयोग कर सकते हैं।

निम्न उदाहरण पूरे पृष्ठ की पृष्ठभूमि का रंग नारंगी पर सेट करता है। शीर्षक तत्वों में से प्रत्येक को एक अलग पृष्ठभूमि मिलती है।

<शरीर>
<एच 2>मैं हरा हूँएच 2>
<h3>मैं लाल हूँh3>
<एच 4>मैं नीला हूंएच 4>
शरीर>

CSS का उपयोग करके, आप प्रत्येक तत्व के लिए एक अद्वितीय पृष्ठभूमि रंग लागू कर सकते हैं:

instagram viewer 
शरीर {
पृष्ठभूमि का रंग: नारंगी;
}
एच 2 {
पृष्ठभूमि का रंग: #006600;
}


h3 {
पृष्ठभूमि का रंग: rgb(128, 0, 0);
}
एच 4{
पृष्ठभूमि का रंग: एचएसएल(240, 100%, 50%);
}

यह पेज को इस तरह दिखने के लिए स्टाइल करेगा:

किसी तत्व की पारदर्शिता निर्धारित करने के लिए आप अपारदर्शिता गुण का उपयोग कर सकते हैं। अपारदर्शिता 0.0 और 1.0 के बीच मान लेती है। मूल्य जितना कम होगा, तत्व उतना ही अधिक पारदर्शी होगा।

उदाहरण के तौर पर, शरीर तत्व की अस्पष्टता को 0.5 पर सेट करने का प्रयास करें:

शरीर {
पृष्ठभूमि का रंग:नारंगी;
अस्पष्टता:0.5;
}

यह निम्नानुसार प्रदर्शित होगा—पिछले स्क्रीनशॉट में रंगों की तुलना करें:

2. पृष्ठभूमि छवि

पृष्ठभूमि-छवि गुण छवि को तत्व की पृष्ठभूमि के रूप में सेट करता है। आप एक स्थानीय छवि या इंटरनेट से एक का संदर्भ ले सकते हैं।

<शरीर>
 <एच 1>नमस्तेवहाँ!एच 1>
 <पी>मैंपासएकछविमेंमेरापृष्ठभूमि!पी>
शरीर>

सीएसएस फ़ाइल:

शरीर {
पृष्ठभूमि छवि: यूआरएल ("https://इमेजिस.pexels.com/तस्वीरें/1191710/पेक्सल्स-फोटो-1191710जेपीईजी?ऑटो=संकुचित करें&सी=srgb&डब्ल्यू=1260&एच=750&डीपीआर=1");
}

यह इस प्रकार प्रदर्शित होगा:

आप भी उपयोग कर सकते हैं पृष्ठभूमि ढाल अपने आवेदन के लिए एक अनूठा रूप बनाने के लिए।

3. पृष्ठभूमि दोहराएँ

पृष्ठभूमि-छवि गुण डिफ़ॉल्ट रूप से छवियों को दोहराता है। आप छवि को x-अक्ष पर क्षैतिज रूप से या y-अक्ष पर लंबवत दोहराना चुन सकते हैं।

वैकल्पिक रूप से, यदि दोहराना आपकी शैली के अनुरूप नहीं है, तो आप मान का उपयोग करके इसे हटा सकते हैं कोई दोहराने.

<शरीर>
<एच 1>नमस्ते!एच 1>
<h3>मैं एक्स-एक्सिस पर रिपीट बैकग्राउंड-रिपीट प्रॉपर्टी का प्रदर्शन कर रहा हूं!h3>
शरीर>

x-अक्ष के साथ दोहराई जाने वाली पृष्ठभूमि लागू करने के लिए निम्न CSS का उपयोग करें:

शरीर {
पृष्ठभूमि छवि: यूआरएल("HTTPS के://इमेजिस.pexels.com/तस्वीरें/459335/पेक्सल्स-फोटो-459335जेपीईजी?ऑटो=संकुचित करें&सी=srgb&डब्ल्यू=1260&एच=750&डीपीआर=1");
पृष्ठभूमि दोहराएँ: दोहराने-x;
}

परिणाम:

अगला, छवि को y-अक्ष पर दोहराने का प्रयास करें:

शरीर {
पृष्ठभूमि छवि: यूआरएल ("https://सीडीएनpixabay.com/तस्वीर/2016/04/18/22/05/शंख -1337565__340जेपीजी");
पृष्ठभूमि दोहराएँ: दोहराएँ;
}

परिणाम:

y-अक्ष पर उदाहरण निश्चित रूप से विकृत दिखता है। यदि ये वे पैटर्न नहीं हैं जिन्हें आप ढूंढ रहे हैं, तो आप निर्दिष्ट कर सकते हैं कोई दोहराने बजाय:

शरीर {
पृष्ठभूमि छवि: यूआरएल ("https://इमेजिस.pexels.com/तस्वीरें/259915/पेक्सल्स-फोटो-259915जेपीईजी?ऑटो=संकुचित करें&सी=srgb&डब्ल्यू=600");
पृष्ठभूमि दोहराएँ: नो-रिपीट;
}

परिणाम:

4. पृष्ठभूमि स्थिति

पृष्ठभूमि-स्थिति गुण पृष्ठभूमि छवि की स्थिति को उसके तत्व के भीतर परिभाषित करता है। यह स्थिति-विशिष्ट खोजशब्दों का उपयोग करता है जैसे केंद्र, ऊपर, और तल, या पिक्सेल या प्रतिशत मान।

पिछली छवि में पृष्ठभूमि-स्थिति गुण जोड़ें:

शरीर {
पृष्ठभूमि छवि: यूआरएल("HTTPS के://इमेजिस.pexels.com/तस्वीरें/259915/पेक्सल्स-फोटो-259915जेपीईजी?ऑटो=संकुचित करें&सी=srgb&डब्ल्यू=600");
पृष्ठभूमि स्थिति: ऊपरकेंद्र;
}

यह ऐसा दिखाई देगा:

आप देख सकते हैं कि छवि वेबसाइट के स्वरूप को विकृत करती है। आइए इसे अगली संपत्ति के साथ ठीक करें।

5. पृष्ठभूमि-आकार

आप छवि के लिए एक विशिष्ट आकार को परिभाषित करने के लिए पृष्ठभूमि छवि गुण का उपयोग कर सकते हैं। यह जैसे कीवर्ड का उपयोग करता है ढकना और रोकना या एक पिक्सेल या प्रतिशत मान। पृष्ठभूमि-आकार की संपत्ति जोड़कर विकृत पृष्ठभूमि छवि को ठीक करें।

शरीर {
 पृष्ठभूमि-छवि: यूआरएल (" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? ऑटो=संपीड़ित और सीएस=tinysrgb&w=600");
 बैकग्राउंड-रिपीट: नो-रिपीट;
 पृष्ठभूमि-स्थिति: केंद्र;

परिणाम दिखाता है कि छवि अब वेबपेज को आनुपातिक रूप से कवर करती है।

6. पृष्ठभूमि संलग्न

बैकग्राउंड-अटैचमेंट प्रॉपर्टी परिभाषित करती है कि बैकग्राउंड इमेज की स्थिति स्थिर रहती है या स्क्रॉल होती है। आप निश्चित या स्क्रॉल कीवर्ड का उपयोग कर सकते हैं।

आइए दिखाते हैं कि निम्नलिखित कोड में:

<शरीर>
<एच 1>बैकग्राउंड-अटैचमेंट प्रॉपर्टीएच 1>
<पी>फिक्स्ड अटैचमेंट प्रॉपर्टी के साथ आप देखेंगे कि बैकग्राउंड टेक्स्ट के साथ नहीं चलता है।पी>
<पी>फिक्स्ड अटैचमेंट प्रॉपर्टी के साथ आप देखेंगे कि बैकग्राउंड टेक्स्ट के साथ नहीं चलता है।पी>
<पी>फिक्स्ड अटैचमेंट प्रॉपर्टी के साथ आप देखेंगे कि बैकग्राउंड टेक्स्ट के साथ नहीं चलता है।पी>
<पी>फिक्स्ड अटैचमेंट प्रॉपर्टी के साथ आप देखेंगे कि बैकग्राउंड टेक्स्ट के साथ नहीं चलता है।पी>
<पी>फिक्स्ड अटैचमेंट प्रॉपर्टी के साथ आप देखेंगे कि बैकग्राउंड टेक्स्ट के साथ नहीं चलता है।पी>
<पी>फिक्स्ड अटैचमेंट प्रॉपर्टी के साथ आप देखेंगे कि बैकग्राउंड टेक्स्ट के साथ नहीं चलता है।पी>
<पी>फिक्स्ड अटैचमेंट प्रॉपर्टी के साथ आप देखेंगे कि बैकग्राउंड टेक्स्ट के साथ नहीं चलता है।पी>
<पी>फिक्स्ड अटैचमेंट प्रॉपर्टी के साथ आप देखेंगे कि बैकग्राउंड टेक्स्ट के साथ नहीं चलता है।पी>
<पी>फिक्स्ड अटैचमेंट प्रॉपर्टी के साथ आप देखेंगे कि बैकग्राउंड टेक्स्ट के साथ नहीं चलता है।पी>
<पी>फिक्स्ड अटैचमेंट प्रॉपर्टी के साथ आप देखेंगे कि बैकग्राउंड टेक्स्ट के साथ नहीं चलता है।पी>
<पी>फिक्स्ड अटैचमेंट प्रॉपर्टी के साथ आप देखेंगे कि बैकग्राउंड टेक्स्ट के साथ नहीं चलता है।पी>
<पी>फिक्स्ड अटैचमेंट प्रॉपर्टी के साथ आप देखेंगे कि बैकग्राउंड टेक्स्ट के साथ नहीं चलता है।पी>
शरीर>

सीएसएस फ़ाइल:

शरीर {
पृष्ठभूमि छवि: यूआरएल("HTTPS के://इमेजिस.pexels.com/तस्वीरें/96627/पेक्सल्स-फोटो-96627जेपीईजी?ऑटो=संकुचित करें&सी=srgb&डब्ल्यू=600");
पृष्ठभूमि दोहराएँ: कोई दोहराने;
पृष्ठभूमि स्थिति: केंद्र;
पृष्ठभूमि-आकार: ढकना;
पृष्ठभूमि संलग्न: हल किया गया;
}

यदि आप पृष्ठ को नीचे ले जाते हैं, तो आप देखेंगे कि पृष्ठभूमि नहीं चलती:

स्क्रॉल बैकग्राउंड-अटैचमेंट प्रॉपर्टी को प्रदर्शित करने के लिए, कीवर्ड को इसमें बदलें स्क्रॉल। आप देखेंगे कि अब बैकग्राउंड टेक्स्ट के साथ चलता है।

शरीर {
पृष्ठभूमि छवि: यूआरएल("HTTPS के://इमेजिस.pexels.com/तस्वीरें/96627/पेक्सल्स-फोटो-96627जेपीईजी?ऑटो=संकुचित करें&सी=srgb&डब्ल्यू=600");
पृष्ठभूमि दोहराएँ: कोई दोहराने;
पृष्ठभूमि स्थिति: केंद्र;
पृष्ठभूमि-आकार: ढकना;
पृष्ठभूमि संलग्न: स्क्रॉल;
}

7. पृष्ठभूमि आशुलिपि संपत्ति

आप देख सकते हैं कि सही पृष्ठभूमि प्राप्त करने के लिए आपको कई गुणों को शामिल करने की आवश्यकता है। इसमें बहुत सारे कोड लिखना शामिल है। लेकिन आप बैकग्राउंड शॉर्टहैंड प्रॉपर्टी का इस्तेमाल करके कोड को छोटा कर सकते हैं।

आशुलिपि संपत्ति आपको एक ही पंक्ति में कई पृष्ठभूमि गुण सेट करने की अनुमति देती है। आप कीवर्ड का उपयोग करें पृष्ठभूमि आशुलिपि संपत्ति सेट करने के लिए।

उदाहरण के लिए, इस तरह कोड लिखने के बजाय:

शरीर {
पृष्ठभूमि का रंग: हरा;
पृष्ठभूमि छवि: यूआरएल("लैपटॉप3जेपीजी");
पृष्ठभूमि दोहराएँ: कोई दोहराने;
पृष्ठभूमि-आकार: ढकना;
पृष्ठभूमि-अनुलग्नक: स्क्रॉल;
पृष्ठभूमि स्थिति: केंद्र;
}

आप इसे एक लाइन में इस तरह लिख सकते हैं:

शरीर {
पृष्ठभूमि: हरायूआरएल("लैपटॉप3जेपीजी") कोई दोहरानेढकनास्क्रॉलकेंद्र;
}

आशुलिपि संपत्ति एक विशेष क्रम का पालन करती है। एक या अधिक गुम होने पर भी आपको गुणों को उस क्रम में संरेखित करना होगा। आदेश है:

  • पृष्ठभूमि का रंग
  • पृष्ठभूमि छवि
  • पृष्ठभूमि दोहराएँ
  • पृष्ठभूमि संलग्न
  • पृष्ठभूमि स्थिति

आप विभिन्न का उपयोग करके CSS के साथ दिलचस्प डिज़ाइन बना सकते हैं पृष्ठभूमि पैटर्न. इन प्रतिमानों के साथ, आप अपनी वेबसाइट के लिए अद्वितीय और उत्कृष्ट पृष्ठभूमि प्राप्त कर सकते हैं।

सीएसएस में अन्य पृष्ठभूमि गुण

CSS शक्तिशाली है और आप अपने एप्लिकेशन को मसाला देने के लिए इसके साथ बहुत कुछ कर सकते हैं। आप कुछ एनिमेशन जोड़ने के लिए बैकग्राउंड-क्लिप, बैकग्राउंड-ओरिजिन और बैकग्राउंड-ब्लेंड-मोड जैसे गुणों का उपयोग कर सकते हैं।

आप अपने पृष्ठों को अनुकूलित करने के लिए ग्रेडिएंट और पैटर्न का भी उपयोग कर सकते हैं। अपने वेब डिज़ाइन कौशल को पैना करने के लिए CSS पृष्ठभूमि गुणों के साथ प्रयोग करें।