The background-repeat property controls whether a background image tiles across an element. By default, backgrounds repeat in both directions, but you can limit tiling to one axis or turn it off completely.
Repeat or stop backgrounds.
repeat-x and repeat-y.
Single background images.
Advanced tiling behavior.
Build textures and grids.
Pair with background-size.
The background-repeat CSS property defines how background images are repeated within an element. When a background is smaller than its container, the browser tiles it to fill the area unless you tell it otherwise.
This property is essential for patterns, textures, and decorative tiles. It is equally important for no-repeat layouts where a photo, logo, or icon should appear only once.
Most hero sections and card layouts use background-repeat: no-repeat; so the image does not tile unexpectedly.
Apply background-repeat after setting a background-image:
selector {
background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round;
}.hero {
background-image: url("photo.jpg");
background-repeat: no-repeat;
background-size: cover;
}repeat, which tiles in both directions.repeat no-repeat.space and round affect how tiles fit when the area cannot be filled evenly.background-size).background-size and background-position for full control.| Question | Answer |
|---|---|
| Initial value | repeat |
| Applies to | Background image tiling behavior |
| Inherited | No |
| Animatable | No |
| Common use | Patterns, textures, single hero images, striped backgrounds |
The initial value of background-repeat is repeat. That means a background image tiles both horizontally and vertically until the element is covered.
These are the keyword values you can use with background-repeat.
| Value | Example | Meaning |
|---|---|---|
repeat | background-repeat: repeat; | Tiles the image both horizontally and vertically |
repeat-x | background-repeat: repeat-x; | Tiles the image horizontally only |
repeat-y | background-repeat: repeat-y; | Tiles the image vertically only |
no-repeat | background-repeat: no-repeat; | Shows the background once without tiling |
space | background-repeat: space; | Repeats without clipping and adds space between tiles |
round | background-repeat: round; | Repeats and stretches tiles to fill the area evenly |
repeatTiles in both directions until the element is filled.
Default tiling behavior.
repeat-xCreates a horizontal stripe or row pattern.
Horizontal rows only.
repeat-yCreates a vertical column pattern.
Vertical columns only.
no-repeatShows one copy of the background image.
Common for hero images.
spaceRepeats tiles with gaps instead of clipping edges.
Even spacing between tiles.
roundStretches tiles so the area fills without gaps.
Tiles resize to fit.
space vs round| Value | Behavior | Best for |
|---|---|---|
repeat | Standard tiling; edges may clip | Simple patterns and textures |
space | Repeats without clipping; adds gaps between tiles | Evenly spaced icon grids or dot patterns |
round | Repeats and resizes tiles to fill the area | Backgrounds that must cover an area without gaps |
no-repeat | Single background image only | Photos, logos, and hero banners |
The same dot pattern with four different repeat values:
All panels use the same background-size: 24px 24px; dot pattern.
Try background-repeat with no-repeat, axis-specific tiling, full repeat patterns, and a six-value comparison.
Start with the values you will use most often in real layouts.
Prevent a background from tiling when you want one image only.
.hero {
background-image: url("photo.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}no-repeat shows the background once. This is the most common choice for photos and large decorative images.
Tile a pattern in one direction only to create stripes or columns.
.stripes { background-repeat: repeat-x; }
.columns { background-repeat: repeat-y; }repeat-x tiles horizontally in rows. repeat-y tiles vertically in columns.
Use full repeat for textures, and explore space and round for smarter tiling.
Tile a small pattern in both directions to cover the entire element.
.pattern {
background-image: url("dot.svg");
background-repeat: repeat;
background-size: 24px 24px;
}This is the default behavior. A small tile repeats horizontally and vertically until the box is filled.
See how each keyword changes tiling on the same dot pattern.
.repeat { background-repeat: repeat; }
.space { background-repeat: space; }
.round { background-repeat: round; }repeat tiles normally. space adds gaps between tiles. round stretches tiles so the area fills without clipping.
background-repeat WorksSet an image, gradient, or pattern with background-image.
Use background-repeat to tile in both directions, one axis, or not at all.
Set background-size so each tile is the size you expect before repeating.
You decide whether the background tiles into a pattern or appears once as a single image.
background-repeat is supported in all modern browsers. Basic values like repeat, repeat-x, repeat-y, and no-repeat have excellent legacy support.
Chrome, Firefox, Safari, Edge, and Opera support all common repeat keywords.
Older browsers support repeat, repeat-x, repeat-y, and no-repeat. Use those as safe defaults when space or round are not required.
repeat if neededBottom line: Use background-repeat confidently. It is one of the most stable CSS background properties.
The background-repeat property controls whether background images tile and in which directions. It is essential for patterns, textures, and any layout where a single image should not repeat unexpectedly.
Pair it with background-size and background-position for complete background control, or continue to background-size to learn how to resize tiles and hero images.
no-repeat for photos, logos, and hero bannersbackground-size when using small repeating patternsrepeat-x or repeat-y for striped or column layoutsspace or round for evenly distributed icon gridsno-repeat on large images that should appear oncespace or round without checking older browser needsbackground-repeatUse these points when tiling or stopping background images.
Tiles both directions.
Defaultrepeat-x and repeat-y.
AxesSingle image layouts.
CommonSmart tiling options.
AdvancedControl tile dimensions.
PairOpen the HTML editor, change repeat values, and see how backgrounds tile instantly.
5 people found this page helpful