मैं पृष्ठ की पृष्ठभूमि में एक छवि रखना चाहता हूं और निश्चित रूप से यह एक उत्तरदायी तरीके से होना चाहिए यह HTML कोड है:

   <div > title </div>
<img src="/assets/img/image1.jpeg"  />

और सीएसएस:

img
{
background-size: cover;
background-repeat:no-repeat;

}
-1
inging dev 14 जिंदा 2022, 14:07

4 जवाब

मार्शल का समाधान बेहतर है यदि आप चाहते हैं कि छवि पूरे देखने के क्षेत्र को कवर करे।

हालांकि यह पृष्ठभूमि में नहीं होगा, आपके <img/> टैग का उपयोग करके यह इस प्रकार होगा:

img {
  width: 100%;
  height: 100%;
}
<div> title </div>
<img src="https://picsum.photos/200/300" />
1
JorgeZ 14 जिंदा 2022, 14:23
हाँ अब यह उत्तरदायी है लेकिन छवि पृष्ठभूमि में होनी चाहिए, इसलिए शीर्षक छवि पर होना चाहिए छवि से पहले नहीं
 – 
inging dev
14 जिंदा 2022, 14:23
मार्शल के समाधान को देखें।
 – 
JorgeZ
14 जिंदा 2022, 14:23

आप शरीर की पृष्ठभूमि-छवि गुण सेट करना चाहते हैं

body {
  background-image: url("/assets/img/image1.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
}
1
Marshall 14 जिंदा 2022, 14:24

आप बैकग्राउंड प्रॉपर्टी को जोड़ सकते हैं कि आप किस कंटेनर में बैकग्राउंड img चाहते हैं, अगर उसका बॉडी या कोई अन्य कंटेनर, आपकी img चौड़ाई और ऊंचाई की संपत्ति में भी जोड़ सकता है अन्यथा यह कंटेनर से आगे निकल जाएगा, यदि आप कवर करना चाहते हैं तो आपको 100% जोड़ना चाहिए पूरा कंटेनर।

  background-position:center center
0
nazli 14 जिंदा 2022, 14:24

पेज के लिए बैकग्राउंड इमेज को body एलीमेंट पर सबसे अच्छा रखा जाएगा — यहां एक साधारण उदाहरण दिया गया है जो background शॉर्टहैंड का इस्तेमाल करता है:

body {
  background: url('../relative/path/to/img/goes/here') no-repeat #paleblue;
}

यहां, हमने छवि प्रदान की है, एक निर्देश है कि छवि को दोहराना नहीं चाहिए (यह डिफ़ॉल्ट रूप से होगा), और एक 'फ़ॉल-बैक' पृष्ठभूमि रंग - यह उपयोगी है, उदाहरण के लिए, छवि लोड करने में विफल रहता है।

यहाँ और भी बहुत कुछ किया जा सकता है। अधिक विवरण के लिए MDN देखें। background-size पर विशेष ध्यान दें, क्योंकि आप छवि, स्क्रीन आकार आदि के आधार पर या तो cover या contain का उपयोग करना चाहेंगे। spec दोनों के लिए सीधा है, लेकिन आप बहुत आसानी से एक को दूसरे के लिए स्वैप कर सकते हैं और फिर से वापस आ सकते हैं अपना कोड देखें और प्रत्येक का (अक्सर स्पष्ट) प्रभाव देखें।

0
marktripney 14 जिंदा 2022, 14:34