पृष्ठभूमि

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

बैकग्राउंड

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

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

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

ब्राउज़र सहायता

• 1
• 12
• 1
• 1

सोर्स

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

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

ब्राउज़र सहायता

• 1
• 12
• 1
• 1

सोर्स

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

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

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

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

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

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

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

बैकग्राउंड की इमेज दोहराई जाने वाली इमेज

ब्राउज़र सहायता

• 1
• 12
• 1
• 1

सोर्स

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

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

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

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

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

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

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

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

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

ब्राउज़र सहायता

• 1
• 12
• 1
• 1

सोर्स

आपने ध्यान दिया होगा कि वेब पर मौजूद कुछ इमेज को 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;

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

ऐसा करें

background-position: bottom 88% right 33%;

ऐसा करें

background-position: right 33% bottom 88%;

यह न करें

background-position: 88% 33% bottom left;

तीन या उससे ज़्यादा पैरामीटर का इस्तेमाल करते समय, सीएसएस की लंबाई की वैल्यू से पहले top, right, 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-position देखें.

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

ब्राउज़र सहायता

• 3
• 12
• 4
• 5

सोर्स

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

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

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

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

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

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

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

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

ब्राउज़र सहायता

• 1
• 12
• 1
• 1

सोर्स

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

यह तीन कीवर्ड स्वीकार करता है: scroll, fixed, और local.

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

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

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

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

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

ब्राउज़र सहायता

• 1
• 12
• 4
• 3

सोर्स

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

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

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

ब्राउज़र सहायता

• 1
• 12
• 4
• 5

सोर्स

background-clip प्रॉपर्टी यह कंट्रोल करती है कि बैकग्राउंड लेयर में क्या दिखाया जाए. इस बात से कोई फ़र्क़ नहीं पड़ता कि background-origin प्रॉपर्टी के लिए क्या सीमाएं बनाई गई हैं.

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

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

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

ब्राउज़र सहायता

• 1
• 12
• 4
• 5

सोर्स

ध्यान दें: यह प्रॉपर्टी, background-clip: text को एक साथ सीएसएस बॉक्स पर सेट करने के साथ काम नहीं करती.

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

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

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

ब्राउज़र सिर्फ़ बैकग्राउंड या आखिरी लेयर के लिए फ़ाइनल बैकग्राउंड लेयर तय करता है. सिर्फ़ इस लेयर को 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%

यह किसी बैकग्राउंड इमेज को बॉक्स में सबसे ऊपर और बॉक्स के दाएं किनारे से 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 प्रॉपर्टी के लिए अमान्य वैल्यू है.