एचटीएमएल पृष्ठभूमि छवियां
लगभग किसी भी HTML तत्व के लिए एक पृष्ठभूमि छवि निर्दिष्ट की जा सकती है।
एक HTML तत्व पर पृष्ठभूमि छवि
HTML तत्व पर पृष्ठभूमि छवि जोड़ने के लिए, HTML styleविशेषता और CSS गुण का उपयोग करें background-image:
उदाहरण
एक HTML तत्व पर एक पृष्ठभूमि छवि जोड़ें:
<div style="background-image: url('img_girl.jpg');">
आप अनुभाग <style>
में, तत्व में पृष्ठभूमि छवि भी निर्दिष्ट कर सकते हैं :<head>
उदाहरण
<style>
तत्व में पृष्ठभूमि छवि निर्दिष्ट करें :
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
पृष्ठ पर पृष्ठभूमि छवि
<body>यदि आप चाहते हैं कि पूरे पृष्ठ में पृष्ठभूमि छवि हो, तो आपको तत्व पर पृष्ठभूमि छवि निर्दिष्ट करनी होगी :
उदाहरण
पूरे पृष्ठ के लिए एक पृष्ठभूमि छवि जोड़ें:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
पृष्ठभूमि दोहराएँ
यदि पृष्ठभूमि छवि तत्व से छोटी है, तो छवि तब तक क्षैतिज और लंबवत रूप से दोहराएगी, जब तक कि वह तत्व के अंत तक नहीं पहुंच जाती:
उदाहरण
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
पृष्ठभूमि छवि को दोहराने से बचने के लिए, background-repeatसंपत्ति को पर सेट करें no-repeat।
उदाहरण
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
पृष्ठभूमि कवर
यदि आप चाहते हैं कि पृष्ठभूमि छवि पूरे तत्व को कवर करे, तो आप background-sizeसंपत्ति को
सेट कर सकते हैंcover.
साथ ही, यह सुनिश्चित करने के लिए कि संपूर्ण तत्व हमेशा ढका रहता है,
background-attachmentगुण को इस पर सेट करेंfixed:
इस तरह, पृष्ठभूमि छवि बिना किसी खिंचाव के पूरे तत्व को कवर करेगी (छवि अपने मूल अनुपात को बनाए रखेगी):
उदाहरण
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
पृष्ठभूमि खिंचाव
यदि आप चाहते हैं कि पृष्ठभूमि छवि पूरे तत्व में फिट हो जाए, तो आप background-sizeसंपत्ति को
इस पर सेट कर सकते हैं 100% 100%:
ब्राउज़र विंडो का आकार बदलने का प्रयास करें, और आप देखेंगे कि छवि खिंच जाएगी, लेकिन हमेशा पूरे तत्व को कवर करें।
उदाहरण
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
अधिक जानें सीएसएस
ऊपर के उदाहरणों से आपने सीखा है कि सीएसएस पृष्ठभूमि गुणों का उपयोग करके पृष्ठभूमि छवियों को स्टाइल किया जा सकता है।
सीएसएस पृष्ठभूमि गुणों के बारे में अधिक जानने के लिए, हमारे सीएसएस पृष्ठभूमि ट्यूटोरियल का अध्ययन करें ।