HTML Background Images

एक बुनियादी Background Image सेट करना

background-image: url("path/to/image.jpg") किसी element के content के पीछे एक image paint करता है, जो एक सामान्य <img> src attribute जैसे ही relative या absolute path syntax का उपयोग करता है।

<img> tag के विपरीत, image खुद page के HTML content में कभी नहीं दिखती -- यह विशुद्ध रूप से एक CSS painting effect है।

उदाहरण: Setting a Basic Background Image

<style>
  .hero {
    background-image: url("photo.jpg");
    background-color: gray;
  }
</style>
<div class="hero">Hero content</div>

background-repeat से Tiling नियंत्रित करना

By default, अपने container से छोटी एक background image उपलब्ध जगह भरने के लिए horizontally और vertically दोनों तरह से repeat (tile) होती है। background-repeat: no-repeat image को सिर्फ एक बार दिखाता है, जबकि repeat-x या repeat-y tiling को एक direction तक सीमित कर देता है, जो किसी decorative strip pattern के लिए उपयोगी है।

उदाहरण: Controlling Tiling with background-repeat

<style>
  .hero {
    background-image: url("photo.jpg");
    background-repeat: no-repeat;
  }
</style>
<div class="hero">Hero content</div>

background-position से Positioning

background-position नियंत्रित करता है कि image अपने container के अंदर कहां anchor होती है, center या top right जैसे keywords, या 20px 50% जैसे explicit values का उपयोग करते हुए।

यह तय करता है कि जब container पूरी image से छोटा हो, तो image का कौन सा हिस्सा सबसे पहले दिखेगा।

उदाहरण: Positioning with background-position

<style>
  .hero {
    background-image: url("photo.jpg");
    background-position: center;
  }
</style>
<div class="hero">Hero content</div>

background-size से Scaling

background-size नियंत्रित करता है कि image अपने container के relative कितनी बड़ी render होती है -- cover किसी भी overflow को crop करते हुए image को पूरे container में fill करने के लिए scale करता है, और contain बिना crop किए image को पूरी तरह container के अंदर fit करने के लिए scale करता है, जिससे उसके आसपास खाली जगह भी बच सकती है।

उदाहरण: Scaling with background-size

<style>
  .hero {
    background-image: url("photo.jpg");
    background-size: cover;
  }
</style>
<div class="hero">Hero content</div>

कई Background Images को Layer करना

CSS url() values को commas से अलग करके एक ही element पर एक से अधिक background-image allow करता है -- सूची में सबसे पहली image सबसे ऊपर render होती है और बाद वाली उसके नीचे, जो किसी photo पर gradient overlay combine करने के लिए उपयोगी है ताकि overlaid text readable रहे।

उदाहरण: Layering Multiple Background Images

<style>
  .hero {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("photo.jpg");
  }
</style>
<div class="hero">Hero content</div>