CSS background-repeat Property

CSS background-repeat Property

The background-repeat property in CSS controls whether and how a background image repeats within an element.

1. Syntax

selector {
  background-repeat: value;
}

2. Accepted Values

Value	Description
repeat (default)	The background image repeats both horizontally & vertically.
no-repeat	The image appears only once, without repeating.
repeat-x	The image repeats horizontally (left to right).
repeat-y	The image repeats vertically (top to bottom).
round	The image is stretched or shrunk to fit the container without gaps.
space	The image repeats with even spacing between them.

3. Example – Using no-repeat

.box {
  width: 300px;
  height: 200px;
  background-image: url("image.jpg");
  background-repeat: no-repeat;
}

✅ The background image appears only once without repeating.

4. Example – Using repeat-x

.box {
  width: 500px;
  height: 200px;
  background-image: url("image.jpg");
  background-repeat: repeat-x;
}

✅ The background image repeats horizontally.

5. Example – Using repeat-y

.box {
  width: 300px;
  height: 500px;
  background-image: url("image.jpg");
  background-repeat: repeat-y;
}

✅ The background image repeats vertically.

6. Example – Using round

.box {
  width: 400px;
  height: 200px;
  background-image: url("image.jpg");
  background-repeat: round;
}

✅ The image scales slightly so there are no gaps between repetitions.

7. Example – Using space

.box {
  width: 500px;
  height: 300px;
  background-image: url("image.jpg");
  background-repeat: space;
}

✅ The images repeat evenly with spaces between them.

8. Best Practices

✔ Use no-repeat for logos & single background images.
✔ Use repeat-x or repeat-y for seamless patterns.
✔ Use round to prevent uneven cropping of background images.
✔ Use space for evenly spaced background designs.