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

background-imageसीएसएस में संपत्ति एक ग्राफिक (जैसे PNG, एसवीजी, JPG.webp, GIF, WebP) या एक तत्व की पृष्ठभूमि को ढाल लागू होता है।

दो अलग-अलग प्रकार की छवियां हैं जिन्हें आप सीएसएस के साथ शामिल कर सकते हैं: नियमित चित्र और ग्रेडिएंट।

इमेजिस

एक पृष्ठभूमि पर एक छवि का उपयोग करना बहुत आसान है:

body ( background: url(sweettexture.jpg.webp); )

url()मूल्य आप किसी भी छवि के लिए एक फ़ाइल पथ प्रदान करने के लिए अनुमति देता है, और यह उस तत्व के लिए पृष्ठभूमि के रूप में दिखाई देगा।

आप इसके लिए एक डेटा URI भी सेट कर सकते हैं url()। यह इस तरह दिखता है:

body ( /* Base64 encoded transparent gif */ background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); )

यह तकनीक एक HTTP अनुरोध को हटाती है, जो एक अच्छी बात है। लेकिन, कई डाउनसाइड हैं, इसलिए इससे पहले कि आप अपनी सभी छवियों को बदलना शुरू करें सुनिश्चित करें कि आप डेटा यूआरआई के सभी पेशेवरों और विपक्षों पर विचार करते हैं।

आप background-imageछवियों को स्प्राइट करने के लिए भी उपयोग कर सकते हैं , जो HTTP अनुरोधों को कम करने के लिए एक और उपयोगी तरीका है।

ढ़ाल

पृष्ठभूमि का उपयोग करते समय एक अन्य विकल्प ब्राउज़र को एक ढाल बनाने के लिए बताना है। यहाँ एक रैखिक ढाल का एक सुपर-डुपर सरल उदाहरण है:

body ( background: linear-gradient(black, white); )

आप रेडियल ग्रेडिएंट का भी उपयोग कर सकते हैं:

body ( background: radial-gradient(circle, black, white); )

तकनीकी रूप से, ग्रेडिएंट बैकग्राउंड इमेज का एक और रूप है। अंतर यह है कि ब्राउज़र आपके लिए छवि बनाता है। यहां उन्हें लिखने का तरीका बताया गया है: CSS3 ग्रेडिएंट सिंटेक्स

ऊपर दिया गया उदाहरण केवल एक ग्रेडिएंट का उपयोग करता है, लेकिन आप एक-दूसरे के ऊपर कई ग्रेडिएंट को भी लेयर कर सकते हैं। इस तकनीक का उपयोग करके कुछ अद्भुत अद्भुत पैटर्न बनाए जा सकते हैं।

फालबैक कलर सेट करना

यदि एक पृष्ठभूमि छवि लोड करने में विफल रहती है, या आपकी ढाल पृष्ठभूमि को एक ऐसे ब्राउज़र पर देखा जाता है जो ग्रेडिएंट का समर्थन नहीं करता है, तो ब्राउज़र बैकबैक के रूप में पृष्ठभूमि रंग की तलाश करेगा। आप इस तरह से अपने कमबैक रंग को निर्दिष्ट कर सकते हैं:

body ( background: url(sweettexture.jpg.webp) blue; )

एकाधिक पृष्ठभूमि छवियाँ

आप अपनी पृष्ठभूमि के लिए कई छवियों, या चित्रों और ग्रेडिएंट के मिश्रण का उपयोग कर सकते हैं। एकाधिक पृष्ठभूमि छवियां अब अच्छी तरह से समर्थित हैं (सभी आधुनिक ब्राउज़र और ग्राफिक छवियों के लिए IE9 +, ग्रेडर के लिए IE10 +)।

जब आप कई पृष्ठभूमि छवियों का उपयोग कर रहे हैं, तो ध्यान रखें कि कुछ हद तक काउंटर-सहज स्टैकिंग क्रम है। उस छवि को सूचीबद्ध करें जो सबसे पहले होनी चाहिए, और वह छवि जो पिछली बार होनी चाहिए, इस प्रकार है:

body ( background: url(logo.png.webp), url(background-pattern.png.webp); )

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

body ( background: url(logo.png.webp) bottom center no-repeat, url(background-pattern.png.webp) repeat; )

आप कितनी पृष्ठभूमि छवियां सेट कर सकते हैं इसकी कोई सीमा नहीं है, और आप अपनी पृष्ठभूमि छवियों को एनिमेट करने जैसी ठंडी चीजें कर सकते हैं। डेविड वाल्श के ब्लॉग पर एनीमेशन के साथ कई पृष्ठभूमि छवियों का एक अच्छा उदाहरण है।

डेमो

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन बैकग्राउंड-इमेज देखें।

सम्बंधित

• पृष्ठभूमि संलग्न
• बैकग्राउंड-क्लिप
• पृष्ठभूमि का रंग
• पृष्ठभूमि मूल के
• पृष्ठभूमि स्थिति
• पृष्ठभूमि दोहराएँ
• पृष्ठभूमि का आकार

और अधिक संसाधनों

• CSS3 की कल्पना
• एमडीएन
• सही पूर्ण पृष्ठ पृष्ठभूमि छवियाँ
• सीएसएस ग्रेडर

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

नियमित छवियां हर जगह काम करती हैं, और कई छवियां आधुनिक ब्राउज़रों और IE9 + में काम करती हैं। यहाँ ग्रेडिएंट्स का समर्थन है:

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