सीएसएस पॉडकास्ट - 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
प्रॉपर्टी की मदद से बैकग्राउंड की इमेज (बैकग्राउंड लेयर की इमेज) की तय जगह पर बदलाव किया जा सकता है.
यह तीन कीवर्ड स्वीकार करता है: 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 ;
आपने जो सीखा है उसकी जांच करें
सीएसएस बैकग्राउंड के बारे में अपनी जानकारी देखें
बैकग्राउंड की इमेज, सीएसएस बॉक्स में सबसे ऊपर बाईं ओर होती हैं.
background-position
का साफ़ तौर पर इस्तेमाल करना ज़रूरी है.
बैकग्राउंड की इमेज को डिफ़ॉल्ट रूप से दोहराया नहीं जाता.
background-repeat: no-repeat
का इस्तेमाल करना चाहिए. इसके अलावा, किसी खास ऐक्सिस में बार-बार होने से रोकने के लिए, background-repeat: repeat-x
और background-repeat: repeat-y
का इस्तेमाल किया जा सकता है.
इनमें से background-position
एलान मान्य हैं?
background-position: 50% left
background-position: top right 33%
background-position: right bottom
background-position: left
आपके इस्तेमाल किए जाने वाले व्यूपोर्ट में बैकग्राउंड की इमेज को ठीक करने के लिए, यह तरीका अपनाएं:
background-position: fixed
background-position
प्रॉपर्टी के लिए अमान्य वैल्यू है.'
background-fixed-to-viewport: true
background-fixed-to-viewport
, अभी तक सीएसएस में मौजूद नहीं है.
background-attachment: fixed
background-attachment: fixed
, बैकग्राउंड की इमेज को साफ़ तौर पर सेट करता है, ताकि उसे मौजूदा व्यूपोर्ट में ठीक किया जा सके.
background-attachment: scroll
background-attachment
वह प्रॉपर्टी है जिसका इस्तेमाल करके, बैकग्राउंड की इमेज को व्यूपोर्ट में ठीक किया जाना तय किया जा सकता है. हालांकि, scroll
ऐसी प्रॉपर्टी की डिफ़ॉल्ट वैल्यू है जो बैकग्राउंड की इमेज को डिफ़ॉल्ट रूप से उस बॉक्स में ठीक करती है जिस पर बॉक्स के अंदर का कॉन्टेंट नहीं है.'
किसी सीएसएस बॉक्स में, बैकग्राउंड का डिफ़ॉल्ट ऑरिजिन यह होता है:
content-box
background-origin
के लिए मान्य वैल्यू, लेकिन यह डिफ़ॉल्ट वैल्यू नहीं है.
border-box
background-origin
के लिए मान्य वैल्यू और यह पहले से व्यवस्थित बॉर्डर को बैकग्राउंड में सबसे ऊपर दिखाया जा सकता है. हालांकि, इसे डिफ़ॉल्ट तौर पर सेट नहीं किया जा सकता.
padding-box
background-origin
के लिए डिफ़ॉल्ट वैल्यू. बैकग्राउंड को कॉन्टेंट के अलावा और बॉक्स के बॉर्डर तक रेंडर होने की अनुमति देता है.
margin-box
background-origin
प्रॉपर्टी के लिए अमान्य वैल्यू है.