The default value, repeat, tiles the image both horizontally and vertically until it fills the element's entire background area, which is ideal for small, seamless pattern textures but usually undesired for a single larger photograph. no-repeat displays the image exactly once with no tiling at all, repeat-x and repeat-y restrict tiling to only the horizontal or vertical direction respectively, and the less common space and round values adjust tile spacing or scaling specifically to avoid a partially-cut-off tile at the edge, evenly distributing whole tiles instead.
1Understanding Background-repeat
The default value, repeat, tiles the image both horizontally and vertically until it fills the element's entire background area, which is ideal for small, seamless pattern textures but usually undesired for a single larger photograph. no-repeat displays the image exactly once with no tiling at all, repeat-x and repeat-y restrict tiling to only the horizontal or vertical direction respectively, and the less common space and round values adjust tile spacing or scaling specifically to avoid a partially-cut-off tile at the edge, evenly distributing whole tiles instead.
Set background-repeat: no-repeat whenever using a single, larger image as a background rather than a small seamless pattern — forgetting this is one of the most common reasons a background photo unexpectedly appears tiled multiple times across an element.
.hero {
background-image: url("photo.jpg");
background-repeat: no-repeat;
}2Practical Example
Here is a real-world application of Background-repeat showing how it is used in production CSS code.
.pattern-bg {
background-image: url("dots.png");
background-repeat: repeat;
}3Best Practices
Follow these guidelines when working with Background-repeat:
1. Set background-repeat: no-repeat explicitly whenever using a single larger image, since the default repeat value will otherwise tile it unexpectedly
2. Leave background-repeat at its default repeat value specifically for small, seamlessly-tiling pattern or texture images designed for that purpose
3. Use repeat-x or repeat-y specifically when a pattern should tile in only one direction, like a horizontal repeating border texture
Tip: Set background-repeat: no-repeat whenever using a single, larger image as a background rather than a small seamless pattern — forgetting this is one of the most common reasons a background photo unexpectedly appears tiled multiple times across an element.
.hero {
background-image: url("photo.jpg");
background-repeat: no-repeat;
}