पृष्ठभूमि - सीएसएस-ट्रिक्स

backgroundसीएसएस में संपत्ति आप किसी भी तत्व की पृष्ठभूमि को नियंत्रित करने (क्या पेंट उस तत्व में सामग्री के ठीक नीचे) की अनुमति देता है। यह एक आशुलिपि संपत्ति है, जिसका अर्थ है कि यह आपको लिखने की अनुमति देता है कि एक में कई सीएसएस गुण क्या होंगे। इस कदर:

body ( background: url(sweettexture.jpg.webp) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ )

background आठ अन्य गुणों से बना है:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

आप इन गुणों के किसी भी संयोजन का उपयोग कर सकते हैं जो आपको पसंद है, लगभग किसी भी क्रम में (हालांकि कल्पना में अनुशंसित आदेश ऊपर है)। हालांकि एक गोत्र है: जो कुछ भी आप backgroundसंपत्ति में निर्दिष्ट नहीं करते हैं वह स्वचालित रूप से इसके डिफ़ॉल्ट पर सेट होता है। तो अगर आप ऐसा कुछ करते हैं:

body ( background-color: red; background: url(sweettexture.jpg.webp); )

लाल रंग के बजाय पृष्ठभूमि पारदर्शी होगी। हालांकि यह तय करना आसान है: बस के background-colorबाद परिभाषित करें background, या बस आशुलिपि का उपयोग करें (जैसे background: url(… ) red;)

एकाधिक पृष्ठभूमि

CSS3 ने कई पृष्ठभूमि के लिए समर्थन जोड़ा, जो एक दूसरे के शीर्ष पर परत करते हैं। पृष्ठभूमि से संबंधित कोई भी संपत्ति इस तरह अल्पविराम से अलग की गई सूची ले सकती है:

body ( background: url(sweettexture.jpg.webp), url(texture2.jpg.webp) black; background-repeat: repeat-x, no-repeat; )

अल्पविराम से अलग सूची में प्रत्येक मान एक परत से मेल खाता है: पहला मान शीर्ष परत है, दूसरा मान दूसरी परत है, और पृष्ठभूमि रंग हमेशा अंतिम परत है।

व्यंजनों

CodePen पर टिमोथी मिलर (@tjacobdesign) द्वारा पेन इमबर्ड देखें।

ब्राउज़र का समर्थन

समर्थन विभिन्न विशिष्ट गुणों के बीच भिन्न होता है, और पंचांग के प्रत्येक संबंधित लेख में अद्वितीय ब्राउज़र समर्थन नोट हैं। बेसिक सिंगल-कलर बैकग्राउंड और सिंगल इमेज हर जगह काम करते हैं, और जो कुछ भी सपोर्ट नहीं करता है, वह बस अगली सबसे अच्छी चीज पर वापस आ जाता है, फिर चाहे वह इमेज हो या कलर।

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
काम करता है	काम करता है	काम करता है	काम करता है	काम करता है	काम करता है	काम करता है