HTML Background Images

HTML से पहले की छवियाँ

HTML तत्व के बाद की छवि

किसी HTML तत्व में पृष्ठभूमि छवि जोड़ने के लिए, HTML शैली विशेषता और CSS पृष्ठभूमि-छवि विशेषता का उपयोग करें:

उदाहरण

<p> तत्व के बाद छवि जोड़ें:

<p style="background-image: url('img_girl.jpg');">

आप <head> अनुभाग में <style> तत्व में पृष्ठभूमि छवि भी निर्दिष्ट कर सकते हैं:

उदाहरण

<style>
p {
  background-image: url('img_girl.jpg');
}
</style>
Background Image Example

पृष्ठ पर बाद का चित्र

यदि आप पूरे पृष्ठ के लिए पृष्ठभूमि छवि चाहते हैं, तो <body> तत्व में पृष्ठभूमि छवि निर्दिष्ट करें:

उदाहरण

<style>
body {
  background-image: url('img_girl.jpg');
}
</style>

उसके बाद, छवि स्वयं को दोहराती है

यदि बाद में छवि तत्व से छोटी है, तो छवि स्वचालित रूप से क्षैतिज और लंबवत रूप से तब तक दोहराई जाएगी जब तक कि वह बाद में तत्व के अंत तक नहीं पहुंच जाती:

उदाहरण

<style>
body {
  background-image: url('example_img_girl.jpg');
}
</style>

बैकग्राउंड छवि को दोहराने से रोकने के लिए, बैकग्राउंड-रिपीट प्रॉपर्टी को नो-रिपीट पर सेट करें:

उदाहरण

<style>
body {
  background-image: url('example_img_girl.jpg');
  background-repeat: no-repeat;
}
</style>
Background Repeat Example

बाद में पूरी फिल्म में फैल गया

यदि आप चाहते हैं कि पृष्ठभूमि छवि पूरे तत्व को कवर करे, तो आप पृष्ठभूमि-आकार गुण को कवर करने के लिए सेट कर सकते हैं।

साथ ही, यह सुनिश्चित करने के लिए कि पूरा तत्व हमेशा कवर किया गया है, बैकग्राउंड-अटैचमेंट प्रॉपर्टी को फिक्स्ड पर सेट करें:

उदाहरण

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

बाद में फिल्म का विस्तार

यदि आप चाहते हैं कि पृष्ठभूमि छवि पूरे तत्व में फिट होने के लिए खिंच जाए, तो आप पृष्ठभूमि-आकार की संपत्ति को 100% 100% पर सेट कर सकते हैं:

उदाहरण

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
</style>

अभ्यास

❓पृष्ठभूमि छवियों को परिभाषित करने के लिए सही सीएसएस विशेषता क्या है?

बीजी विशेषता
✗ ग़लत!
छवि विशेषता
✗ ग़लत!
पृष्ठभूमि-छवि संपत्ति
✓ ठीक है!

अधिक सीएसएस जानें

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

सीएसएस पृष्ठभूमि गुणों के बारे में अधिक जानने के लिए, हमारे सीएसएस पृष्ठभूमि ट्यूटोरियल को पढ़ें।