पृष्ठभूमि

द सीएसएस पॉडकास्ट - 053: बैकग्राउंड

बैकग्राउंड

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

बैकग्राउंड लेयर, उपयोगकर्ता से दूर होती हैं. ये लेयर, बॉक्स के कॉन्टेंट के पीछे 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% लागू किया जाता है, तो बैकग्राउंड की इमेज को सबसे नीचे से 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 प्रॉपर्टी की मदद से, बैकग्राउंड की इमेज (बैकग्राउंड लेयर का हिस्सा, इमेज) की तय जगह में बदलाव किया जा सकता है.

यह 3 कीवर्ड स्वीकार करता है: 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 ;

देखें कि आपको कितना समझ आया है

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