CSS Multiple Backgrounds

CSS किसी एक element को कई background images एक-दूसरे के ऊपर stack करके ले जाने देता है, जैसे किसी design file की layers, यह सब सिर्फ एक background-image declaration से।

In this page:

Commas से Backgrounds Stack करना
हर Layer के लिए अलग Repeat, Position, और Size
Images और Gradients को Mix करना
सिर्फ एक background-color
Common Multi-Background Patterns

Syntax

css

selector {
  background: url("image1") position no-repeat,
              url("image2") position repeat,
              color;
}

Commas से Backgrounds Stack करना

background-image में commas से अलग की गई कई url() values list करना उन्हें stack कर देता है, जिसमें पहली listed value सबसे ऊपर render होती है और आख़िरी सबसे नीचे, element के अपने background-color के सबसे करीब।

Note:

Accepted values:
comma-separated layers — पहली listed सबसे ऊपर होती है
url() और gradients — एक declaration में mix किए जा सकते हैं
background-position — हर layer के लिए एक value
background-size — हर layer के लिए एक value
background-color — सिर्फ आख़िरी layer पर allowed है

उदाहरण: Stacking Backgrounds with Commas

css

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

हर Layer के लिए अलग Repeat, Position, और Size

background-repeat, background-position, और background-size पर एक matching comma-separated list देकर हर layer का अपना repeat, position, और size हो सकता है -- हर list की Nth value Nth image layer पर लागू होती है।

Note:

Accepted values:
comma-separated layers — पहली layer सबसे ऊपर है
per-layer repeat, position और size — यह भी comma-separated
url() और gradients — एक list में mix किए जा सकते हैं
background-color — सिर्फ आख़िरी layer में allowed है

उदाहरण: Per-Layer Repeat, Position, and Size

css

<style>
.box {
  background-image: url('https://placehold.co/30x30'), url('https://placehold.co/300x150');
  background-repeat: no-repeat, no-repeat;
  background-position: top right, center;
  height: 150px;
}
</style>
<div class="box">Each layer gets its own position</div>

Images और Gradients को Mix करना

क्योंकि gradients valid background-image values हैं, एक common technique top layer के रूप में एक gradient (अक्सर semi-transparent) को नीचे किसी photo के साथ combine करती है, जिसका इस्तेमाल text की readability के लिए किसी image के हिस्से को dark या tint करने में होता है।

Note:

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

उदाहरण: Mixing Images and Gradients

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 tints the photo underneath</div>

सिर्फ एक background-color

background-image के उलट, background-color सिर्फ एक value accept करता है और हमेशा हर image layer के नीचे बैठता है, आखिरी fallback fill की तरह काम करते हुए जो सिर्फ तब दिखता है जब सभी image layers transparent हों या load न हो पाएँ।

उदाहरण: Only One background-color

css

<style>
.box {
  background-image: url('https://placehold.co/30x30');
  background-repeat: no-repeat;
  background-color: navy;
  height: 150px;
}
</style>
<div class="box">Color only shows where the image is transparent</div>

Common Multi-Background Patterns

आम इस्तेमालों में एक solid color के ऊपर layered कोई decorative pattern, किसी बड़ी photo के ऊपर किसी corner में positioned icon, या दो gradients को combine करना शामिल है ताकि कोई ऐसा effect बने जो अकेले कोई एक नहीं बना सकता था।

उदाहरण: Common Multi-Background Patterns

css

<style>
.box {
  background-image: url('https://placehold.co/20x20'), linear-gradient(45deg, #eee, #eee);
  background-repeat: repeat, no-repeat;
  height: 150px;
}
</style>
<div class="box">Decorative pattern layered over a solid color</div>

Live Example

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Background Shorthand Next Lesson → CSS Background Size

CSS Multiple Backgrounds

Commas से Backgrounds Stack करना

हर Layer के लिए अलग Repeat, Position, और Size

Images और Gradients को Mix करना

सिर्फ एक background-color

Common Multi-Background Patterns

Chapter Quiz — Complete all 21 topics to unlock

Login to run this code