CSS Background Image Repeat

जब किसी element में background image लगाई जाती है, तो CSS default रूप से उस image को horizontal और vertical दोनों directions में repeat कर देती है। इस behavior को control करने के लिए background-repeat property का use किया जाता है।

background-repeat Property

background-repeat: value;

यह property decide करती है कि background image repeat होगी या नहीं।

Default Repeat Behavior

body {
  background-image: url("bg.jpg");
}

By default:

• Image repeat होती है
• पूरे element को fill करती है

background-repeat: repeat

यह default value होती है।

body {
  background-image: url("bg.jpg");
  background-repeat: repeat;
}

Image दोनों directions में repeat होगी।

background-repeat: no-repeat

Image को repeat होने से रोकता है।

body {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
}

Image सिर्फ एक बार दिखेगी।

background-repeat: repeat-x

Image सिर्फ horizontal direction में repeat होगी।

body {
  background-image: url("bg.jpg");
  background-repeat: repeat-x;
}

background-repeat: repeat-y

Image सिर्फ vertical direction में repeat होगी।

body {
  background-image: url("bg.jpg");
  background-repeat: repeat-y;
}

Background Repeat with Position

Repeat को position के साथ control किया जा सकता है।

body {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-position: center top;
}

Background Repeat on Small Image

छोटी image repeat करके pattern बनाई जाती है।

div {
  background-image: url("pattern.png");
  background-repeat: repeat;
}

Multiple Background Images Repeat

अगर multiple background images हों, तो हर image का repeat अलग-अलग set किया जा सकता है।

div {
  background-image: url("img1.png"), url("img2.jpg");
  background-repeat: repeat-x, no-repeat;
}

background Shorthand with Repeat

body {
  background: url("bg.jpg") no-repeat center;
}

Common Mistakes

repeat बंद करना भूल जाना

Large images बिना no-repeat के खराब दिख सकती हैं।

background-size ignore करना

Repeat सही दिखाने के लिए size भी important है।

Best Practices

• Pattern images के लिए repeat best है
• Banner या hero images के लिए no-repeat use करें
• Repeat के साथ position जरूर set करें

Summary

• Default में background image repeat होती है
• repeat, no-repeat, repeat-x, repeat-y available values हैं
• Repeat behavior pattern और layout पर depend करता है
• Multiple images के लिए repeat अलग-अलग set किया जा सकता है