CSS Background Image

background-image किसी element के content के पीछे एक picture रखती है, यही तरीका है जिससे hero banners, textured panels, और icon-only buttons बिना किसी <img> tag के अपनी imagery पाते हैं।

In this page:

एक Background Image Set करना
किसी Color के ऊपर Image Layer करना
कई Images को Stack करना
Background Images के रूप में Gradients
जब Background Images Fail होती हैं

Syntax

css

selector {
  background-image: url("image-path");
}

एक Background Image Set करना

background-image: url('path/to/image.jpg') एक image load करता है और उसे element के content के पीछे render करता है। एक <img> element के उलट, एक background image assistive technology के लिए पूरी तरह decorative है और उसमें कोई alt text नहीं होता, इसलिए यह कभी भी meaningful content पहुँचाने का इकलौता तरीका नहीं होना चाहिए।

Note:

Accepted values:
url("image.jpg") — image file
linear-gradient() — एक image के रूप में gradient
none — कोई image नहीं (default)
image-set() — resolution-aware images
Commas से अलग की गई कई images एक-दूसरे के ऊपर layer होती हैं
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Setting a Background Image

css

<style>
.box {
  background-image: url('https://placehold.co/300x150');
  height: 150px;
}
</style>
<div class="box">Purely decorative, no alt text</div>

किसी Color के ऊपर Image Layer करना

background-color और background-image दोनों एक ही element पर set किए जा सकते हैं; image color के ऊपर render होती है, इसलिए color सिर्फ image के transparent हिस्सों से या image के load होने से पहले ही दिखता है। किसी photo के पीछे एक solid fallback color देने का यह एक common pattern है।

Note:

Accepted values:
url("...") — एक image file
none — कोई image नहीं (initial value)
linear-gradient() — एक straight-line color gradient
radial-gradient() — एक circular या elliptical gradient
conic-gradient() — किसी center point के चारों ओर sweep होने वाला gradient
commas से अलग की गई कई values — stacked layers
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Layering an Image Over a Color

css

<style>
.box {
  background-color: #333;
  background-image: url('https://placehold.co/300x150');
  height: 150px;
}
</style>
<div class="box">Color shows through transparent parts or before load</div>

कई Images को Stack करना

background-image url() values की एक comma-separated list accept करती है, जिसमें पहली listed image सबसे ऊपर और आख़िरी सबसे नीचे stack होती है, किसी design tool के layers जैसा। दूसरी background-* properties पर matching comma-separated lists के ज़रिए हर layer का अपना repeat/position/size हो सकता है।

उदाहरण: Stacking Multiple Images

css

<style>
.box {
  background-image: url('https://placehold.co/100x100'), url('https://placehold.co/300x150');
  background-repeat: no-repeat, no-repeat;
  height: 150px;
}
</style>
<div class="box">First image layered on top of the second</div>

Background Images के रूप में Gradients

linear-gradient() और radial-gradient() जैसे CSS gradient functions valid background-image values हैं, अलग properties नहीं -- मतलब एक gradient को उसी comma-separated stacking का इस्तेमाल करके किसी photo के साथ layer किया जा सकता है, आमतौर पर पढ़ने लायक text overlay के लिए किसी photo के हिस्से को dark करने में इस्तेमाल होता है।

Note:

Accepted values:
url("...") — एक image file
none — कोई image नहीं (initial value)
linear-gradient() — एक straight-line color gradient
radial-gradient() — एक circular या elliptical gradient
conic-gradient() — किसी center point के चारों ओर sweep होने वाला gradient
commas से अलग की गई कई values — stacked layers
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Gradients as Background Images

css

<style>
.box {
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://placehold.co/300x150');
  height: 150px;
  color: white;
}
</style>
<div class="box">Gradient darkens the photo underneath for readable text</div>

जब Background Images Fail होती हैं

अगर कोई background image load नहीं हो पाती, तो element बस अपनी background-color दिखाने पर वापस आ जाता है (या transparent, अगर कोई set नहीं है) बिना किसी broken-image icon के, एक टूटे हुए <img> के उलट। यह graceful degradation एक वजह है कि purely decorative imagery के लिए background images को prefer किया जाता है।

उदाहरण: When Background Images Fail

css

<style>
.box {
  background-color: #ccc;
  background-image: url('missing-image.jpg');
  height: 150px;
}
</style>
<div class="box">Falls back to the background-color, no broken icon</div>

Live Example

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Background Color Next Lesson → CSS Background Repeat

CSS Background Image

एक Background Image Set करना

किसी Color के ऊपर Image Layer करना

कई Images को Stack करना

Background Images के रूप में Gradients

जब Background Images Fail होती हैं

Chapter Quiz — Complete all 21 topics to unlock

Login to run this code