HTML Background Images

HTML Background Images का उपयोग किसी element या पूरे web page के पीछे image दिखाने के लिए किया जाता है।
Background images layout को attractive बनाती हैं और modern website design का important हिस्सा होती हैं।

HTML में Background Image कैसे लगती है

HTML में directly background image लगाने का कोई tag नहीं होता।
Background images हमेशा CSS की मदद से लगाई जाती हैं।

CSS background-image Property

Background image लगाने के लिए background-image property का उपयोग किया जाता है।

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

यह image पूरे page के background में दिखाई देगी।

Specific Element पर Background Image

पूरे page की बजाय किसी particular element पर भी background image लगाई जा सकती है।

<style>
div {
  background-image: url("box-bg.jpg");
}
</style>

<div>
  This is a div with background image
</div>

Background Image Repeat

By default background image repeat होती है, यानी image बार-बार दिखाई देती है।

background-repeat: repeat;

Repeat को control करने के options:

background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;

Example:

<style>
body {
  background-image: url("pattern.png");
  background-repeat: no-repeat;
}
</style>

Background Image Size

Background image का size control करने के लिए background-size use किया जाता है।

background-size: cover;

Common values:

cover
contain
100% 100%

Example:

<style>
body {
  background-image: url("bg.jpg");
  background-size: cover;
}
</style>

cover image को पूरे area में fit कर देता है बिना distortion के।

Background Position

Image को कहाँ दिखाना है, यह background-position से तय होता है।

background-position: center;

Example:

<style>
body {
  background-image: url("bg.jpg");
  background-position: center top;
}
</style>

Background Attachment

Background image scroll के साथ move करे या fixed रहे, यह background-attachment से control होता है।

background-attachment: fixed;

Example:

<style>
body {
  background-image: url("bg.jpg");
  background-attachment: fixed;
}
</style>

Fixed background parallax effect के लिए use किया जाता है।

Short-Hand Background Property

Multiple background properties को एक ही line में लिखा जा सकता है।

<style>
body {
  background: url("bg.jpg") no-repeat center fixed;
  background-size: cover;
}
</style>

Multiple Background Images

एक element पर एक से ज्यादा background images भी लगाई जा सकती हैं।

<style>
div {
  background-image: url("layer1.png"), url("layer2.png");
  background-position: left top, center;
  background-repeat: no-repeat, no-repeat;
}
</style>

Responsive Background Images

Responsive design के लिए background image flexible होनी चाहिए।

<style>
.section {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
}
</style>

यह mobile और desktop दोनों में सही दिखेगी।

Accessibility और Background Images

Background images informative content के लिए नहीं होनी चाहिए।
Important text हमेशा HTML content में होना चाहिए, image के अंदर नहीं।

Contrast का ध्यान रखें ताकि text readable रहे।

Common Mistakes

Background image बहुत heavy रखना
Text और background image का contrast कम होना
Mobile optimization ignore करना
Important content image में डाल देना

Best Practices

Compressed images use करें
CSS shorthand का सही उपयोग करें
Mobile-first approach रखें
Fallback background color जरूर दें

Example:

background-color: #f2f2f2;

Real World Example

<style>
.hero {
  height: 300px;
  background-image: url("banner.jpg");
  background-size: cover;
  background-position: center;
  color: white;
  padding: 50px;
}
</style>

<div class="hero">
  <h1>Welcome to Our Website</h1>
</div>

Summary

HTML में background images CSS के through लगाई जाती हैं।
background-image, background-size, और background-position सबसे important properties हैं।
Optimized और responsive background images professional web design के लिए जरूरी होती हैं।