कैसे ठीक करें CSS बैकग्राउंड-इमेज काम नहीं कर रहा है

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

इसमें मदद करने के लिए, HTML और CSS का उपयोग करके, आपकी पृष्ठभूमि-छवि काम नहीं कर रही है, इसे ठीक करने के चार तरीके यहां दिए गए हैं:

1. जांचें कि आपकी CSS फ़ाइल आपकी HTML फ़ाइल में सही ढंग से लिंक है।

अपनी सीएसएस शैलियों को अपनी वेबसाइट में लोड करने के लिए, आपको एक <link> . जोड़ना होगा अपनी HTML फ़ाइल में टैग करें। यह टैग <head></head> . के अंदर होना चाहिए टैग, और कुछ इस तरह दिखना चाहिए:

<link rel="stylesheet" href="/style.css">

आप कैसे बता सकते हैं कि आपकी CSS फ़ाइल सही तरीके से लोड हुई है या नहीं?

एक संकेत यह है कि यदि आप अपनी वेबसाइट लोड करते हैं और पृष्ठभूमि सफेद है, तो सभी टेक्स्ट टाइम्स न्यू रोमन फ़ॉन्ट की तरह दिखते हैं, और कोई रंग या अन्य शैलियाँ नहीं हैं।

आप पृष्ठ में कहीं भी राइट-क्लिक करके और "तत्व का निरीक्षण करें" का चयन करके या Ctrl-Shift-I दबाकर अपने ब्राउज़र के इंस्पेक्टर टूल की जांच कर सकते हैं। निरीक्षक में, यदि आपको कोई त्रुटि दिखाई देती है जो कहती है कि 404 not found CSS फ़ाइल के लिए, या The resource... was blocked due to MIME type mismatch , जो आपको बताता है कि CSS फ़ाइल लोड करने में कोई समस्या थी।

कैसे ठीक करें CSS बैकग्राउंड-इमेज काम नहीं कर रहा है | एचटीएमएल/सीएसएस

यदि आपको इनमें से कोई एक त्रुटि दिखाई देती है और आपकी वेबसाइट बिना स्टाइल की दिखती है, तो सबसे पहले जांचना है <link> उपनाम। सुनिश्चित करें कि href विशेषता आपकी वास्तविक CSS फ़ाइल के समान फ़ाइल नाम लोड कर रही है, और यह कि पथ सही है।

पथ आपकी HTML फ़ाइल के सापेक्ष होना चाहिए। यदि CSS फ़ाइल आपकी HTML फ़ाइल के समान निर्देशिका में है, तो आप href . सेट कर सकते हैं होने के लिए style.css (या जो भी आपका CSS फ़ाइल नाम है)।

मैं आमतौर पर एक फ़ॉरवर्ड स्लैश डालता हूँ / पथ से पहले, उदाहरण के लिए:href="/style.css" . यह सुनिश्चित करेगा कि पथ आपकी वेबसाइट के रूट से शुरू होगा।

आपको इसकी आवश्यकता हो सकती है यदि आपके पास अलग-अलग सबफ़ोल्डर में पृष्ठ हैं जो सभी समान लोड कर रहे हैं <head> कोड। उदाहरण के लिए, यदि आप एक टेम्पलेट सीएमएस (सामग्री प्रबंधन प्रणाली) का उपयोग कर रहे हैं जहां साझा कोड है।

2. सुनिश्चित करें कि छवि पथ पृष्ठभूमि-छवि url में सही ढंग से सेट है।

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

कैसे बताएं कि बैकग्राउंड-इमेज सही तरीके से लोड हुआ है या नहीं?

यदि बैकग्राउंड इमेज लोड नहीं हो रही है, और आपको इमेज के लिए इंस्पेक्टर में 404 त्रुटि दिखाई देती है, तो यह एक अच्छा संकेतक है कि इमेज के साथ ही कोई समस्या है।

यदि ऐसा हो रहा है, तो दोबारा जांचें कि छवि फ़ाइल नाम वास्तविक फ़ाइल से मेल खाता है, और यह कि background-image: url() में पथ सही स्थान पर जा रहा है।

छवि फ़ाइल का स्थान स्वयं CSS फ़ाइल के स्थान के सापेक्ष होना चाहिए, न कि आपकी वेबसाइट के रूट से। इसलिए यदि आपकी सीएसएस फ़ाइल सबफ़ोल्डर में है, तो पथ को सीएसएस फ़ाइल आपके रूट में होने की तुलना में अलग होना पड़ सकता है।

इसे समझाने में मदद के लिए, मान लें कि आपके पास इस तरह की एक वेबसाइट फ़ाइल संरचना है:

(project folder)
  |-- 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 में नेविगेट करें फ़ोल्डर,
फिर छवि फ़ाइल को ही लोड करें।

background-image CSS फ़ाइल में संपत्ति इस तरह दिखनी चाहिए: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 पृष्ठभूमि गुणों में सही सिंटैक्स का उपयोग कर रहे हैं।

एक आखिरी चीज जिसे आप जांच सकते हैं वह यह है कि क्या आप पृष्ठभूमि सीएसएस गुणों के लिए सही सिंटैक्स का उपयोग कर रहे हैं।

यहां कुछ सामान्य हैं जिनका आप संभावित मूल्यों के साथ उपयोग कर रहे हैं:

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 . का उपयोग करने का प्रयास करते हैं सीएसएस नियम अपने आप अमान्य हो जाएगा और कोई नहीं पृष्ठभूमि के गुण बिल्कुल काम करेंगे।

अगर ऐसा होता है, तो आप कोड इंस्पेक्टर में इस तरह से अमान्य नियम देख पाएंगे: