background-repeat: Tile, Stretch, or Stop
By default a small background image tiles to fill the box. Learn to control that tiling — including the very common bug of an accidentally repeating photo.
Step 1 of 3
Tiling is the default
If you put a small image into a large element, the browser repeats it to fill the space. That is sometimes what you want (subtle pattern textures, dotted backgrounds) and sometimes a bug (a photograph showing up four times in a row).
Values of background-repeat:
repeat— tile in both directions (default).repeat-x— tile only horizontally.repeat-y— tile only vertically.no-repeat— do not tile at all; show the image once.space/round— distribute evenly with adjustments (less common).
Think of it this way: Repeat is like wallpaper — it tiles a small pattern across a whole wall.
no-repeat is like hanging one picture in the centre of the wall.Tip
Whenever you set a single photograph as a background and it looks 'doubled' or 'gridded', the fix is almost always background-repeat: no-repeat; paired with background-size: cover.
Learn more on MDN
HTMLREAD ONLY
PREVIEW