पृष्ठभूमि

The CSS Podcast - 053: Background

हर सीएसएस बॉक्स के पीछे एक खास लेयर होती है, जिसे बैकग्राउंड लेयर कहा जाता है. सीएसएस में, इसमें कई तरह के बदलाव करने के तरीके मौजूद हैं. जैसे, एक से ज़्यादा बैकग्राउंड इस्तेमाल करना.

बैकग्राउंड लेयर, उपयोगकर्ता से सबसे दूर होती हैं. इन्हें बॉक्स के कॉन्टेंट के पीछे रेंडर किया जाता है. यह रेंडरिंग, बॉक्स के padding-box से शुरू होती है. इससे बैकग्राउंड लेयर, बॉर्डर के साथ ओवरलैप नहीं होती.

बैकग्राउंड का रंग

बैकग्राउंड लेयर पर रंग सेट करना, सबसे आसान इफ़ेक्ट है. background-color की शुरुआती वैल्यू transparent होती है. इससे माता-पिता के कॉन्टेंट को देखा जा सकता है. बैकग्राउंड लेयर पर सेट किया गया मान्य रंग, उस एलिमेंट पर पेंट की गई अन्य चीज़ों के पीछे दिखता है.

बैकग्राउंड की इमेज

background-color लेयर के ऊपर, background-image प्रॉपर्टी का इस्तेमाल करके बैकग्राउंड इमेज जोड़ी जा सकती है. background-image इन फ़ॉर्मैट में डेटा स्वीकार करता है:

• url सीएसएस फ़ंक्शन का इस्तेमाल करके, इमेज का यूआरएल या डेटा यूआरआई.
• ग्रेडिएंट सीएसएस फ़ंक्शन से डाइनैमिक तौर पर बनाई गई इमेज.

url सीएसएस फ़ंक्शन की मदद से बैकग्राउंड-इमेज सेट करना

सीएसएस ग्रेडिएंट बैकग्राउंड

सीएसएस में ग्रेडिएंट के कई फ़ंक्शन मौजूद हैं. इनकी मदद से, दो या उससे ज़्यादा रंगों को पास करने पर बैकग्राउंड-इमेज जनरेट की जा सकती है.

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

ग्रेडिएंट फ़ंक्शन का इस्तेमाल करके बैकग्राउंड-इमेज लागू करने का उदाहरण दिखाने वाला डेमो:

बैकग्राउंड की इमेज बार-बार इस्तेमाल करना

डिफ़ॉल्ट रूप से, बैकग्राउंड इमेज को हॉरिज़ॉन्टल और वर्टिकल तौर पर दोहराया जाता है, ताकि बैकग्राउंड लेयर का पूरा स्पेस भर जाए.

इसे बदलने के लिए, background-repeat प्रॉपर्टी का इस्तेमाल करके इनमें से किसी एक वैल्यू का इस्तेमाल करें:

• repeat: उपलब्ध जगह में इमेज दोहराई जाती है और ज़रूरत के हिसाब से काटी जाती है.
• round: उपलब्ध जगह में ज़्यादा से ज़्यादा इमेज फ़िट करने के लिए, इमेज को हॉरिज़ॉन्टल और वर्टिकल तौर पर दोहराया जाता है. उपलब्ध जगह बढ़ने पर, इमेज स्ट्रेच हो जाती है. इमेज की मूल चौड़ाई के आधे हिस्से तक स्ट्रेच होने के बाद, इमेज के ज़्यादा इंस्टेंस जोड़ने के लिए उसे कंप्रेस कर दिया जाता है.
• space: इमेज को हॉरिज़ॉन्टल और वर्टिकल तौर पर दोहराया जाता है, ताकि उपलब्ध जगह में ज़्यादा से ज़्यादा इमेज काट-छांट किए बिना फ़िट हो सकें. इसके लिए, ज़रूरत के हिसाब से इमेज के इंस्टेंस के बीच स्पेस दिया जाता है. दोहराई गई इमेज, बैकग्राउंड लेयर के किनारों तक पहुंचती हैं. साथ ही, इन इमेज के बीच सफ़ेद जगह बराबर-बराबर होती है.

background-repeat प्रॉपर्टी की मदद से, X और Y ऐक्सिस के लिए अलग-अलग बिहेवियर सेट किया जा सकता है. पहला पैरामीटर, हॉरिज़ॉन्टल दोहराए जाने के तरीके को सेट करता है और दूसरा पैरामीटर, वर्टिकल दोहराए जाने के तरीके को सेट करता है.

अगर एक ही वैल्यू का इस्तेमाल किया जाता है, तो यह हॉरिज़ॉन्टल और वर्टिकल, दोनों तरह के दोहराव पर लागू होगी.

शॉर्टहैंड में एक शब्द के विकल्प भी होते हैं, ताकि आपके इंटेंट को साफ़ तौर पर बताया जा सके.

वैल्यू repeat-x, किसी इमेज को सिर्फ़ हॉरिज़ॉन्टल तौर पर दोहराती है. यह वैल्यू repeat no-repeat के बराबर होती है.

इस डेमो में, background-repeat प्रॉपर्टी की इन सुविधाओं के बारे में बताया गया है:

बैकग्राउंड की पोज़िशन

आपने देखा होगा कि जब वेब पर कुछ इमेज को background-repeat: no-repeat एलान के साथ स्टाइल किया जाता है, तो ऐसी इमेज अपने कंटेनर के सबसे ऊपर बाईं ओर दिखती हैं.

बैकग्राउंड इमेज की शुरुआती पोज़िशन सबसे ऊपर बाईं ओर होती है. background-position प्रॉपर्टी की मदद से, इमेज की पोज़िशन को ऑफ़सेट करके इस व्यवहार को बदला जा सकता है.

background-repeat की तरह ही, background-position प्रॉपर्टी की मदद से, इमेज को X और Y ऐक्सिस के साथ-साथ डिफ़ॉल्ट रूप से दो वैल्यू के साथ अलग-अलग पोज़िशन में रखा जा सकता है.

सीएसएस की लंबाई और प्रतिशत का इस्तेमाल करने पर, पहला पैरामीटर हॉरिज़ॉन्टल ऐक्सिस से जुड़ा होता है, जबकि दूसरा पैरामीटर वर्टिकल ऐक्सिस से जुड़ा होता है.

जब कीवर्ड का इस्तेमाल सिर्फ़ किया जाता है, तो कीवर्ड के क्रम से कोई फ़र्क़ नहीं पड़ता:

background-position: left 50%;

background-position: top left;

background-position: left top;

  background-position: 50% left;

  background-position: left right;

background-position प्रॉपर्टी में एक वैल्यू का शॉर्टहैंड भी होता है. वैल्यू न देने पर, 50% सेट हो जाती है. यहां एक उदाहरण दिया गया है, जिसमें background-position प्रॉपर्टी के लिए स्वीकार किए जाने वाले कीवर्ड का इस्तेमाल करके, इसकी जानकारी दी गई है:

background-position प्रॉपर्टी, दो पैरामीटर वाले डिफ़ॉल्ट फ़ॉर्म और एक पैरामीटर वाले फ़ॉर्म के अलावा, चार पैरामीटर तक भी स्वीकार करती है;

तीन या चार पैरामीटर का इस्तेमाल करने पर, सीएसएस की लंबाई या प्रतिशत के पहले top, left, right या bottom कीवर्ड होने चाहिए. इससे ब्राउज़र यह हिसाब लगा पाता है कि सीएसएस बॉक्स के किस किनारे से ऑफ़सेट शुरू होना चाहिए.

तीन पैरामीटर का इस्तेमाल करने पर, सीएसएस की लंबाई या वैल्यू, दूसरा या तीसरा पैरामीटर हो सकती है. बाकी दो पैरामीटर कीवर्ड होंगे. जिस कीवर्ड के बाद सीएसएस की लंबाई या वैल्यू आती है उसका इस्तेमाल, उस एज का पता लगाने के लिए किया जाएगा जिसका ऑफ़सेट सीएसएस की लंबाई या वैल्यू है. बताए गए दूसरे कीवर्ड का ऑफ़सेट 0 पर सेट है.

background-position: bottom 88% right;

background-position: right bottom 88%;

background-position: 88% bottom right;

background-position: bottom 88% right 33%;

background-position: right 33% bottom 88%;

background-position: 88% 33% bottom left;

अगर background-position: top left 20% को सीएसएस बैकग्राउंड इमेज पर लागू किया जाता है, तो इमेज को बॉक्स में सबसे ऊपर रखा जाता है. 20% वैल्यू, बॉक्स की बाईं ओर (x ऐक्सिस पर) 20% ऑफ़सेट दिखाती है.

अगर background-position: top 20% left को सीएसएस की बैकग्राउंड इमेज पर लागू किया जाता है, तो 20% वैल्यू, सीएसएस बॉक्स के ऊपरी हिस्से (y ऐक्सिस पर) से 20% ऑफ़सेट दिखाती है. साथ ही, इमेज को बॉक्स की बाईं ओर रखा जाता है.

चार पैरामीटर का इस्तेमाल करने पर, दो कीवर्ड को दो वैल्यू के साथ जोड़ा जाता है. ये वैल्यू, बताए गए हर कीवर्ड के ऑरिजिन के हिसाब से ऑफ़सेट होती हैं. अगर background-position: bottom 20% right 30% को background-image पर लागू किया जाता है, तो background-image को सीएसएस बॉक्स के नीचे से 20% और दाईं ओर से 30% पर पोज़िशन किया जाता है.

इस डेमो में इस व्यवहार के बारे में बताया गया है:

यहां सीएसएस और कीवर्ड वैल्यू के मिश्रण का इस्तेमाल करके, background-position प्रॉपर्टी का इस्तेमाल करने के कुछ और उदाहरण दिए गए हैं:

बैकग्राउंड का साइज़

background-size प्रॉपर्टी, बैकग्राउंड इमेज का साइज़ सेट करती है. डिफ़ॉल्ट रूप से, बैकग्राउंड इमेज का साइज़ उनकी मूल (असल) चौड़ाई, ऊंचाई, और आसपेक्ट रेशियो के आधार पर तय होता है.

background-size प्रॉपर्टी, सीएसएस की लंबाई और प्रतिशत वैल्यू या खास कीवर्ड का इस्तेमाल करती है. इस प्रॉपर्टी में ज़्यादा से ज़्यादा दो पैरामीटर इस्तेमाल किए जा सकते हैं. इनकी मदद से, बैकग्राउंड की चौड़ाई और ऊंचाई को अलग-अलग बदला जा सकता है.

background-size प्रॉपर्टी में ये कीवर्ड इस्तेमाल किए जा सकते हैं:

• auto: बैकग्राउंड इमेज का साइज़, उसकी मूल चौड़ाई और ऊंचाई के आधार पर तय किया जाता है. अगर auto का इस्तेमाल चौड़ाई (पहला पैरामीटर) या ऊंचाई (दूसरा पैरामीटर) के लिए किसी दूसरी सीएसएस वैल्यू के साथ किया जाता है, तो auto पर सेट किए गए डाइमेंशन का साइज़, इमेज के नेचुरल आसपेक्ट रेशियो को बनाए रखने के लिए ज़रूरत के हिसाब से तय किया जाता है. यह background-size प्रॉपर्टी का डिफ़ॉल्ट व्यवहार है.
• cover: बैकग्राउंड लेयर के पूरे हिस्से को कवर करता है. इसका मतलब यह हो सकता है कि इमेज को स्केल किया गया हो या काटा गया हो.
• contain: इमेज को खींचने या काटने के बिना, जगह भरने के लिए उसका साइज़ बदलता है. इस वजह से, खाली जगह रह सकती है. इससे इमेज दोहराई जा सकती है. ऐसा तब तक होगा, जब तक background-repeat को no-repeat पर सेट नहीं किया जाता.

इनमें से दो पैरामीटर का इस्तेमाल, किसी दूसरे पैरामीटर के बिना किया जा सकता है.

इस डेमो में, इन कीवर्ड के काम करने का तरीका बताया गया है:

background-size पर इन कीवर्ड को लागू करने का डेमो:

बैकग्राउंड अटैचमेंट

background-attachment प्रॉपर्टी की मदद से, स्क्रीन पर लेयर दिखने के बाद, बैकग्राउंड इमेज (बैकग्राउंड लेयर का हिस्सा) की तय की गई पोज़िशन में बदलाव किया जा सकता है.

इसमें तीन कीवर्ड इस्तेमाल किए जा सकते हैं: scroll, fixed, और local.

background-attachment प्रॉपर्टी का डिफ़ॉल्ट तरीका, scroll की शुरुआती वैल्यू है. जब ज़्यादा जगह की ज़रूरत होती है, तो इमेज बैकग्राउंड लेयर में उस जगह के साथ चलती हैं. यह जगह, सीएसएस बॉक्स की सीमाओं से तय होती है.

fixed वैल्यू का इस्तेमाल करने से, बैकग्राउंड इमेज की पोज़िशन को व्यूपोर्ट में सेट कर दिया जाता है.

जब बैकग्राउंड लेयर की इमेज, स्क्रीन पर दिखने वाले हिस्से से बाहर स्क्रोल (या रेंडर) हो जाती हैं, तब बैकग्राउंड लेयर में मौजूद इमेज, उसी जगह पर बनी रहती हैं जहां बैकग्राउंड लेयर ने उन्हें रखा था. ऐसा तब तक होता है, जब तक पूरी लेयर को व्यूपोर्ट से स्क्रीन से बाहर स्क्रोल नहीं कर दिया जाता.

local कीवर्ड की मदद से, एलिमेंट के कॉन्टेंट के हिसाब से बैकग्राउंड इमेज की पोज़िशन तय की जा सकती है. बैकग्राउंड इमेज अब उस जगह के साथ-साथ चलती हैं जहां वे मौजूद होती हैं. ऐसा इसलिए होता है, क्योंकि वह जगह सीएसएस बॉक्स की सीमाओं के अंदर और बाहर रेंडर होती है. आम तौर पर, ऐसा स्क्रोलिंग, 2D या 3D ट्रांसफ़ॉर्मेशन की वजह से होता है.

बैकग्राउंड ऑरिजिन

background-origin प्रॉपर्टी की मदद से, किसी बॉक्स से जुड़े बैकग्राउंड के हिस्से में बदलाव किया जा सकता है. प्रॉपर्टी में स्वीकार की जाने वाली वैल्यू, बॉक्स के border-box , padding-box, और content-box क्षेत्रों से मेल खाती हैं .

नीचे दिए गए डेमो का इस्तेमाल करके, इन विकल्पों को आज़माएं:

बैकग्राउंड क्लिप

background-clip प्रॉपर्टी यह कंट्रोल करती है कि बैकग्राउंड लेयर में क्या दिखे. भले ही, background-origin प्रॉपर्टी ने बॉउंड तय किए हों.

background-origin की तरह, border-box, padding-box, और content-box ऐसे क्षेत्र हैं जिनके लिए सीएसएस बैकग्राउंड लेयर को रेंडर किया जा सकता है. इन कीवर्ड का इस्तेमाल करने पर, तय किए गए हिस्से से बाहर के बैकग्राउंड को काटा या क्लिप किया जाएगा.

background-clip प्रॉपर्टी में text कीवर्ड भी इस्तेमाल किया जा सकता है. यह कीवर्ड, बैकग्राउंड को कॉन्टेंट बॉक्स में मौजूद टेक्स्ट के दायरे में ही क्लिप करता है. सीएसएस बॉक्स में मौजूद असली टेक्स्ट में यह इफ़ेक्ट दिखे, इसके लिए ज़रूरी है कि टेक्स्ट का कुछ हिस्सा या पूरा हिस्सा पारदर्शी हो.

यह एक नई प्रॉपर्टी है. इस लेख को लिखने के समय, Chrome और ज़्यादातर ब्राउज़र को इस प्रॉपर्टी का इस्तेमाल करने के लिए, -webkit- प्रीफ़िक्स की ज़रूरत होती है.

एक से ज़्यादा बैकग्राउंड

जैसा कि मॉड्यूल की शुरुआत में बताया गया है, बैकग्राउंड लेयर में कई सबलेयर तय की जा सकती हैं. कम शब्दों में बताने के लिए, हम इन सबलेयर को बैकग्राउंड कहेंगे.

एक से ज़्यादा बैकग्राउंड, ऊपर से नीचे की ओर तय किए जाते हैं. पहला बैकग्राउंड, उपयोगकर्ता के सबसे नज़दीक होता है, जबकि आखिरी बैकग्राउंड, उपयोगकर्ता से सबसे दूर होता है.

ब्राउज़र, तय किए गए एक ही बैकग्राउंड या आखिरी लेयर को आखिरी बैकग्राउंड लेयर के तौर पर तय करता है. सिर्फ़ इस लेयर को background-color असाइन करने की अनुमति है.

बैकग्राउंड से जुड़ी ज़्यादातर सीएसएस प्रॉपर्टी का इस्तेमाल करके, कई लेयर को अलग-अलग कॉन्फ़िगर किया जा सकता है. ये प्रॉपर्टी कॉमा लगाकर अलग की जाती हैं. इस बारे में नीचे दिए गए कोड स्निपेट और लाइव डेमो में बताया गया है.

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

बैकग्राउंड शॉर्टहैंड

बॉक्स की बैकग्राउंड लेयर को आसानी से स्टाइल करने के लिए, खास तौर पर जब एक से ज़्यादा बैकग्राउंड लेयर की ज़रूरत हो, तो शॉर्टहैंड का इस्तेमाल करें. यह शॉर्टहैंड, इस पैटर्न के हिसाब से काम करता है:

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

एक से ज़्यादा बैकग्राउंड तय करने के लिए, शॉर्टहैंड फ़ॉर्म में क्रम का ध्यान रखना ज़रूरी है. पोज़िशन और साइज़, दोनों की वैल्यू देनी ज़रूरी है. इन्हें स्लैश (/) लगाकर अलग करें. ऑरिजिन और क्लिप के व्यवहार की जानकारी सही क्रम में देने से, उन कीवर्ड को सेट करने का फ़ायदा मिलता है जो दोनों के लिए मान्य होते हैं

यहां दिया गया एलान, बैकग्राउंड को क्लिप करता है और उसे कॉन्टेंट बॉक्स से शुरू करता है:

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

इन शॉर्टहैंड सेमेटिक्स को ध्यान में रखते हुए, कोड स्निपेट के बैकग्राउंड से जुड़े पिछले एलान को फिर से लिखा जा सकता है, ताकि यह इस तरह दिखे:

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

देखें कि आपको क्या समझ आया

सीएसएस बैकग्राउंड के बारे में अपनी जानकारी की जांच करें