CSS background-repeat Property

Definition and Usage

The background-repeat property sets how each background-image tiles inside the painting area. The image can repeat on both axes, only one axis, or not at all. space leaves even gaps. round stretches copies so they fit without gaps.

The initial value is repeat. The property is not inherited. One keyword can cover both axes. Two keywords set horizontal first, then vertical. With several images, list a repeat value for each image, separated by commas. background-position places a single no-repeat image.

CSS Syntax

Two keywords set axes separately, such as repeat no-repeat (same as repeat-x). Separate multiple images with commas.

Property Values

How to Use background-repeat

Give the element an image and a size, then choose how that image tiles.

1. Set a background-image on the element. Without an image, repeat has nothing to tile.
2. Give the element a visible size. Content or a height is enough.
3. Optionally set background-size so each tile has a clear size.
4. Set background-repeat. Use no-repeat with background-position when you want one placed image.

Live Preview

One small blue tile. Change background-repeat and watch how it fills the box.

CSS Examples

Each snippet adds only what background-repeat needs: an image, a tile size, and a sized box. Use Try It Yourself for a live editor.

<style>
  div {
    height: 160px;
    border: 1px solid #ccc;
    background-color: #eff6ff;
    background-image: radial-gradient(circle, #2563eb 0 8px, transparent 9px);
    background-size: 40px 40px;
    background-position: center;
    background-repeat: no-repeat;
  }
</style>

<div></div>

<style>
  div {
    height: 160px;
    border: 1px solid #ccc;
    background-color: #eff6ff;
    background-image: radial-gradient(circle, #2563eb 0 8px, transparent 9px);
    background-size: 40px 40px;
    background-position: center;
    background-repeat: repeat-x;
  }
</style>

<div></div>

<style>
  div {
    height: 160px;
    border: 1px solid #ccc;
    background-color: #ecfdf5;
    background-image: radial-gradient(circle, #059669 0 8px, transparent 9px);
    background-size: 40px 40px;
    background-repeat: space;
  }
</style>

<div></div>

Key Takeaways