CSS Background Repeat

Default रूप से एक background image wallpaper की तरह लगातार tile होती है, और background-repeat वह property है जो तय करती है कि -- और किस direction में -- वह tiling असल में होगी या नहीं।

In this page:

Default: repeat
सिर्फ एक Direction में Repeat करना
no-repeat से Tile रोकना
space और round के साथ Even Spacing
Repeat को Position और Size के साथ Combine करना

Syntax

css

selector {
  background-repeat: repeat | repeat-x | repeat-y | no-repeat;
}

Default: repeat

बिना कोई background-repeat declare किए, एक background image पूरे element को भरने के लिए horizontally और vertically दोनों तरफ़ tile होती है, जो seamless patterns और textures के लिए बिल्कुल सही है लेकिन आमतौर पर किसी अकेली photo या logo के लिए गलत है।

Note:

Accepted values:
repeat — दोनों directions में tile होता है (default)
repeat-x — horizontally tile होता है
repeat-y — vertically tile होता है
no-repeat — एक बार draw होता है
space — बिना clip हुए tile होता है, gaps जोड़ता है
round — tile होकर fit करने के लिए rescale होता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: The Default: repeat

css

<style>
.box {
  background-image: url('https://placehold.co/30x30');
  height: 150px;
}
</style>
<div class="box">Tiles in both directions by default</div>

सिर्फ एक Direction में Repeat करना

repeat-x image को सिर्फ horizontally tile करता है, जो किसी header के top पर चलने वाली एक पतली decorative strip के लिए उपयोगी है; repeat-y सिर्फ vertically tile करता है, जो किसी sidebar texture के लिए उपयोगी है। दोनों दूसरे axis पर image का सिर्फ एक instance दिखाते हैं।

Note:

Accepted values:
repeat-x — सिर्फ horizontally tile करें
repeat-y — सिर्फ vertically tile करें
repeat — दोनों directions में tile करें (initial value)
no-repeat — एक बार draw करें, कोई tiling नहीं
space — बराबर gaps के साथ पूरी copies tile करें
round — इतना scale करें कि पूरी संख्या में fit हो जाएँ
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Repeating in One Direction Only

css

<style>
.strip {
  background-image: url('https://placehold.co/30x30');
  background-repeat: repeat-x;
  height: 30px;
}
</style>
<div class="strip">Tiles only horizontally</div>

no-repeat से Tile रोकना

background-repeat: no-repeat image को exactly एक बार दिखाता है, background-position द्वारा बताई गई किसी भी position पर, बिना किसी direction में tiling के। यह setting लगभग हमेशा एक अकेली hero photo, logo, या icon के साथ जोड़ी जाती है।

Note:

Accepted values:
no-repeat — image को एक बार draw करें
repeat — दोनों directions में tile करें (initial value)
repeat-x / repeat-y — एक axis के साथ tile करें
space — पूरी copies tile करें, बचे हुए space को फैलाते हुए
round — पूरी संख्या में fit करने के लिए tiles को stretch या shrink करें
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Stopping the Tile with no-repeat

css

<style>
.box {
  background-image: url('https://placehold.co/100x100');
  background-repeat: no-repeat;
  height: 150px;
}
</style>
<div class="box">Shows the image exactly once</div>

space और round के साथ Even Spacing

space image को जितनी भी पूरी बार fit हो सके उतनी बार repeat करता है, फिर बची हुई जगह को tiles के बीच बराबर gaps के रूप में बाँट देता है बजाय किसी एक को crop करने के; round image को थोड़ा scale करता है ताकि पूरी संख्या में tiles बिना किसी gap या crop के exactly fit हो जाएँ।

Note:

Accepted values:
space — सिर्फ पूरी tiles, बची हुई जगह gaps के रूप में बराबर फैली हुई
round — tiles इतनी scale की जाती हैं कि पूरी संख्या fit हो, कोई gap नहीं
repeat — बिना adjustment के tile करें (initial value)
no-repeat — एक बार draw करें
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Even Spacing with space and round

css

<style>
.space {
  background-image: url('https://placehold.co/30x30');
  background-repeat: space;
  height: 60px;
}
.round {
  background-image: url('https://placehold.co/30x30');
  background-repeat: round;
  height: 60px;
}
</style>
<div class="space">Equal gaps, no cropping</div>
<div class="round">Slightly scaled, no gaps</div>

Repeat को Position और Size के साथ Combine करना

background-repeat, background-position (पहली tile कहाँ से शुरू होती है) और background-size (हर tile कितनी बड़ी है) के साथ मिलकर काम करता है -- इन तीनों में से किसी एक को बदलना अक्सर बाकी दोनों पर भी दोबारा सोचने की ज़रूरत डालता है ताकि सही visual result मिले।

Note:

Accepted values:
repeat — दोनों directions में tile करें (initial value)
repeat-x — सिर्फ horizontally tile करें
repeat-y — सिर्फ vertically tile करें
no-repeat — image को एक बार draw करें
space — बीच में बराबर gaps के साथ पूरी copies tile करें
round — इतना scale करें कि पूरी संख्या fit हो जाए
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Combining Repeat with Position and Size

css

<style>
.box {
  background-image: url('https://placehold.co/40x40');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60px;
  height: 150px;
}
</style>
<div class="box">Repeat, position, and size working together</div>

Live Example

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Background Image Next Lesson → CSS Background Attachment

CSS Background Repeat

Default: repeat

सिर्फ एक Direction में Repeat करना

no-repeat से Tile रोकना

space और round के साथ Even Spacing

Repeat को Position और Size के साथ Combine करना

Chapter Quiz — Complete all 21 topics to unlock

Login to run this code