📌 Introduction

The background-repeat property in CSS controls how a background image is repeated (tiled) across an element. By default, background images repeat horizontally and vertically, but you can change this behavior to create precise visual layouts. This property is useful for patterns, textures, hero sections, and UI decorations. 🎨✨

🎯 What Does background-repeat Do?

✨ Syntax

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

🧩 Available Values

1. repeat (default)

Image repeats both horizontally and vertically.

background-repeat: repeat;

2. no-repeat

Shows the image only once.

background-repeat: no-repeat;

3. repeat-x

Repeats the image horizontally only.

background-repeat: repeat-x;

4. repeat-y

Repeats the image vertically only.

background-repeat: repeat-y;

5. round

Tiles the image but scales each tile so they fit perfectly with no cut-off or leftover space.

background-repeat: round;

6. space

Repeats the image but adds equal spacing between tiles; the image never gets cut or stretched.

background-repeat: space;

🧩 Using Two Values

Use two values when you want different behavior horizontally and vertically.

/* horizontal | vertical */
background-repeat: repeat no-repeat;

🔥 Practical Examples

1. Pattern Background

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

2. Single Background Image (no repeat)

.hero {
  background-image: url("hero.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

3. Horizontal Repeating Texture

.divider {
  background-image: url("line.png");
  background-repeat: repeat-x;
}

4. Vertical Repeating Line

.sidebar {
  background-image: url("stripe.png");
  background-repeat: repeat-y;
}

5. Perfect Fit Using round

.gallery {
  background-image: url("tile.png");
  background-repeat: round;
}

6. Spaced Background Tiles

.spaced {
  background-image: url("dot.png");
  background-repeat: space;
}

📊 Summary Table

🖼️ Visual Demo

🎉 Conclusion

The background-repeat property gives you precise control over how background images tile across an element. Whether you want full patterns, one-time hero images, evenly spaced tiles, or scaled patterns, this property is essential for crafting beautiful UI backgrounds. 🚀