एक प्रतिक्रियाशील तरीके से पृष्ठभूमि पृष्ठ html में एक छवि बनाएं

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

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

img {
  width: 100%;
  height: 100%;
}

<div> title </div>
<img src="https://picsum.photos/200/300" />

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

body {
  background-image: url("/assets/img/image1.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
}

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

  background-position:center center

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

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

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

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