PLAY CSS
jaen

Background

background-repeat

background-repeat sets whether a background image is tiled and how the tiles are laid out. The initial value, repeat, tiles it like wallpaper and cuts off the images that don’t fit at the edges.

Syntax<repeat-style># …
<repeat-style>#

<repeat-style> = repeat-x | repeat-y
  | [ repeat | space | round | no-repeat ]{1,2}

Preview

Presets
Sample
Image
Drag the bottom-right corner to resize

Code

.box {
  background-image: url(/sample.svg);
  background-size: 36px;
  background-repeat: space;
}

Controls

background-repeatspace
Same value for both directions
background-repeat

About

Four ways to tile

  • repeat: repeats until the area is covered. This is the initial value. Images that don’t fit at the edges are cut off.
  • space: places as many whole images as fit and shares the leftover length equally between the gaps. The first and last images touch the edges of the area, so background-position has no effect in that direction. If two images don’t fit, only one is placed, and background-position decides where.
  • round: when the images don’t fit a whole number of times, resizes them so they do. The count is “area length ÷ image length” rounded to the nearest whole number. A 36px image in a 240px wide area fits 6.67 times, so seven images are drawn, each shrunk to 34.3px wide. Unlike space, background-position still applies, so moving it away from the initial top left cuts off the images at both edges.
  • no-repeat: places a single image without repeating.

Horizontal and vertical

With two values, the first sets the horizontal tiling and the second the vertical. A single value applies to both. repeat-x means repeat no-repeat and repeat-y means no-repeat repeat, each making a one-image band.

Watch out

  • When only one direction is round and background-size is auto in the other, the other direction is resized along with it to keep the aspect ratio. With round in both directions, each is resized on its own, so the aspect ratio can shift a little.
  • space and round fit the images to the area that positions the background (background-origin, the padding box by default). When the background is also painted under the border (the initial background-clip), the same pattern continues out there.
  • Gradients have no natural size, so with background-size left at auto one copy fills the area and repeating makes no pattern. Give a size when you want a pattern.
  • Separate values with commas to set each background-image layer.
  • The CSS Backgrounds Level 4 draft also has background-repeat-x / background-repeat-y for each direction and the writing-mode-relative repeat-block / repeat-inline, but no browser supports them today.
  • The preview here lays the sample image at 36px. Drag the bottom right of the box to resize it and watch the number of images change with space and round.

References

MDN Web Docsbackground-repeatSpecificationCSS Backgrounds and Borders Module Level 3Can I usebackground-repeat

Comments

PLAY CSS