CSS में बैकग्राउंड इमेज के साथ काम करना मुश्किल हो सकता है। क्योंकि भले ही आप इसे कोड में सेट करें, अन्य कारक बैकग्राउंड-इमेज को पेज पर दिखने से रोक सकते हैं।
इसमें मदद के लिए, यहां HTML और CSS का उपयोग करके आपके बैकग्राउंड-इमेज के काम न करने को ठीक करने के चार तरीके दिए गए हैं:
1. जांचें कि आपकी CSS फ़ाइल आपकी HTML फ़ाइल में सही ढंग से लिंक की गई है।
आपके CSS स्टाइल आपकी वेबसाइट में लोड होने के लिए, आपको अपनी HTML फ़ाइल में एक <link> टैग जोड़ना होगा। यह टैग <head></head> टैग्स के अंदर स्थित होना चाहिए, और कुछ इस तरह दिखना चाहिए:
<link rel="stylesheet" href="/style.css">आप कैसे बता सकते हैं कि आपकी CSS फ़ाइल सही ढंग से लोड हुई है या नहीं?
एक संकेत यह है कि यदि आप अपनी वेबसाइट लोड करते हैं और बैकग्राउंड सफेद है, सारा टेक्स्ट Times New Roman फ़ॉन्ट जैसा दिखता है, और कोई रंग या अन्य स्टाइल नहीं हैं।
आप अपने ब्राउज़र के इंस्पेक्टर टूल को पेज पर कहीं भी राइट-क्लिक करके और "Inspect Element" चुनकर या Ctrl-Shift-I दबाकर भी देख सकते हैं। इंस्पेक्टर में, यदि आपको CSS फ़ाइल के लिए 404 not found त्रुटि दिखाई देती है, या The resource... was blocked due to MIME type mismatch, तो यह बताता है कि CSS फ़ाइल लोड करने में कोई समस्या थी।
यदि आपको इनमें से कोई त्रुटि दिखाई देती है और आपकी वेबसाइट अनस्टाइल्ड दिखती है, तो पहली चीज जो जांचनी चाहिए वह है <link> टैग में। सुनिश्चित करें कि href एट्रिब्यूट वही फ़ाइल नाम लोड कर रहा है जो आपकी वास्तविक CSS फ़ाइल का है, और पाथ सही है।
पाथ आपकी HTML फ़ाइल के स्थान के सापेक्ष होना चाहिए। यदि CSS फ़ाइल आपकी HTML फ़ाइल के समान डायरेक्टरी में है, तो आप href को style.css (या जो भी आपका CSS फ़ाइल नाम है) पर सेट कर सकते हैं।
मैं आमतौर पर पाथ से पहले एक फॉरवर्ड स्लैश / लगाता हूं, उदाहरण के लिए: href="/style.css"। यह सुनिश्चित करेगा कि पाथ आपकी वेबसाइट रूट से शुरू होगा।
यदि आपके पास अलग-अलग सबफ़ोल्डर में पेज हैं जो सभी समान <head> कोड लोड कर रहे हैं, तो आपको इसकी आवश्यकता हो सकती है। उदाहरण के लिए, यदि आप एक टेम्पलेटेड CMS (कंटेंट मैनेजमेंट सिस्टम) का उपयोग कर रहे हैं जहां साझा कोड है।
2. सुनिश्चित करें कि बैकग्राउंड-इमेज url में इमेज पाथ सही ढंग से सेट है।
एक बार जब आप सुनिश्चित कर लें कि आपकी CSS फ़ाइल सही ढंग से लिंक की गई है, तो यह भी जांचें कि इमेज स्वयं सही ढंग से सेट है। फिर से, आप ब्राउज़र में अपना कोड इंस्पेक्टर खोलकर जांचना चाहेंगे।
कैसे बताएं कि बैकग्राउंड-इमेज सही ढंग से लोड हुई है या नहीं?
यदि बैकग्राउंड इमेज लोड नहीं होती दिख रही है, और आपको इंस्पेक्टर में इमेज के लिए 404 त्रुटि दिखाई देती है, तो यह एक अच्छा संकेतक है कि इमेज के साथ कोई समस्या है।
यदि ऐसा हो रहा है, तो दोबारा जांचें कि इमेज फ़ाइल नाम वास्तविक फ़ाइल से मेल खाता है, और background-image: url() में पाथ सही स्थान पर जा रहा है।
इमेज फ़ाइल का स्थान CSS फ़ाइल के स्थान के सापेक्ष होना चाहिए, न कि आपकी वेबसाइट रूट के। इसलिए यदि आपकी CSS फ़ाइल एक सबफ़ोल्डर में है, तो पाथ उससे अलग हो सकता है जब CSS फ़ाइल आपके रूट में थी।
इसे समझाने के लिए, मान लें कि आपके पास ऐसी वेबसाइट फ़ाइल संरचना है:
(प्रोजेक्ट फ़ोल्डर) |-- index.html |-- (css) |-- style.css |-- (img) |-- cat-pic-1.jpgइस वेबसाइट में प्रोजेक्ट रूट में index.html फ़ाइल है, एक css फ़ोल्डर जिसमें style.css फ़ाइल है, और एक img फ़ोल्डर जिसमें इमेज cat-pic-1.jpg है।
आपके CSS स्टाइल में, यदि आप cat-pic-1.jpg को बैकग्राउंड इमेज के रूप में लोड करना चाहते हैं, तो फ़ाइल पाथ को:
cssफ़ोल्डर से एक स्तर ऊपर जाना होगा,imgफ़ोल्डर में नेविगेट करना होगा,- फिर इमेज फ़ाइल को लोड करना होगा।
CSS फ़ाइल में background-image प्रॉपर्टी इस तरह दिखनी चाहिए: background-image: url('../img/cat-pic-1.jpg')।
../ प्रतीकों का मतलब है कि आप फ़ाइल संरचना में एक स्तर ऊपर जाएंगे।
आप वही काम इस तरह भी कर सकते हैं: background-image: url('/img/cat-pic-1.jpg')।
यह दृष्टिकोण फॉरवर्ड स्लैश (/) का उपयोग करके वेबसाइट रूट से शुरू करता है, फिर इमेज फ़ाइल लोड करने के लिए img फ़ोल्डर में जाता है।
इसलिए चाहे आप पैरेंट फ़ोल्डर्स के माध्यम से ऊपर नेविगेट करें या वेबसाइट रूट से शुरू करें, अपने कोड इंस्पेक्टर का उपयोग करके टेस्ट और जांच करना न भूलें कि इमेज लोड हो रही है या 404 त्रुटि दे रही है।
3. एलिमेंट की चौड़ाई और/या ऊंचाई स्पष्ट रूप से सेट करें।
यदि इमेज दिखाई नहीं दे रही है, लेकिन आपको कोई 404 त्रुटि नहीं मिल रही है, तो कोड इंस्पेक्टर में जाएं और एलिमेंट को जांचें।
यदि एलिमेंट में कोई HTML कंटेंट नहीं है, तो इसकी शून्य चौड़ाई या ऊंचाई (या दोनों!) हो सकती है। इसका मतलब है कि भले ही बैकग्राउंड इमेज तकनीकी रूप से सही ढंग से लोड हो, एलिमेंट स्वयं अनिवार्य रूप से अदृश्य है यदि इसका आकार 0px है।
ऊपर दिए गए उदाहरण को देखें जो एक वेबसाइट और कोड इंस्पेक्टर दिखा रहा है। यदि आप दाएं पेन में .card__image एलिमेंट पर होवर करते हैं, तो बाएं पेन में एलिमेंट पर एक लेबल दिखाई देगा, जो बताता है कि इसकी 354px चौड़ाई और 0px ऊंचाई है।
वह 0px ऊंचाई का मतलब है कि एलिमेंट दिखाई नहीं देगा।
इसे ठीक करने के लिए, .card__image एलिमेंट की ऊंचाई को स्पष्ट रूप से height: 120px पर सेट करें। यदि एलिमेंट में अलग-अलग लंबाई का टेक्स्ट कंटेंट हो सकता है, तो आप इसे min-height: 120px पर सेट कर सकते हैं, ताकि यह न्यूनतम 120px लंबा हो लेकिन टेक्स्ट कंटेंट को अधिक स्थान की आवश्यकता होने पर लंबा हो सके।
4. सुनिश्चित करें कि आप CSS बैकग्राउंड प्रॉपर्टीज़ में सही सिंटैक्स का उपयोग कर रहे हैं।
एक आखिरी चीज जो आप जांच सकते हैं वह है कि क्या आप बैकग्राउंड CSS प्रॉपर्टीज़ के लिए सही सिंटैक्स का उपयोग कर रहे हैं।
यहां कुछ सामान्य प्रॉपर्टीज़ दी गई हैं जिनका आप उपयोग कर सकते हैं, संभावित मानों के साथ:
background-color: #000000;background-image: url("/landscape1.jpg");background-position: center;background-repeat: no-repeat;background-size: cover;
आप शॉर्टहैंड background प्रॉपर्टी का भी उपयोग कर सकते हैं जो आपको उन सभी अलग-अलग मानों को एक स्टाइल नियम में संयोजित करने देती है:
background: #000 center/cover url("/img/landscape1.jpg") no-repeat;यदि आप इस शॉर्टहैंड प्रॉपर्टी का उपयोग बहुत सारे मानों के साथ कर रहे हैं, तो सुनिश्चित करें कि सिंटैक्स सही है। विभिन्न बैकग्राउंड प्रॉपर्टीज़ का क्रम मायने नहीं रखना चाहिए, लेकिन एक मुश्किल जाल है यदि आप background-size सेट कर रहे हैं।
background-size मान का उपयोग केवल तभी किया जा सकता है जब यह तुरंत background-position मान के बाद आता हो, उनके बीच एक फॉरवर्ड स्लैश (/) के साथ। हमारे उदाहरण में यह इस तरह लिखा गया है: center/cover, जहां center background-position है और cover background-size है।
आप background-position मान का अकेले उपयोग कर सकते हैं, लेकिन यदि आप केवल cover का उपयोग करने का प्रयास करते हैं, तो CSS नियम अमान्य होगा और कोई भी बैकग्राउंड प्रॉपर्टी बिल्कुल भी काम नहीं करेगी।
यदि ऐसा होता है, तो आप कोड इंस्पेक्टर में अमान्य नियम को इस तरह देख पाएंगे:
