HTML & CSS reference

background-repeat

Whether the background image repeats to fill the block.

Syntax

background-repeat: value;

Values

Parameter	Type	Description
repeat	keyword	Tiles in both directions (the default).
no-repeat	keyword	Shown once.
repeat-x \| repeat-y	keyword	Repeats only horizontally or only vertically.

Examples

Polka dots in all directions and in one row:

<style>
  .tiles {
    height: 100px;
    background-image: radial-gradient(circle, tomato 30%, transparent 32%);
    background-size: 25px 25px;
  }
</style>
 
<div class="tiles" style="background-repeat: repeat;"></div>
<p></p>
<div class="tiles" style="background-repeat: repeat-x;"></div>

Notes

A photo usually needs no-repeat: otherwise, in a block larger than the picture, it repeats at the edges.

Related recipes

How to set a background image

In the tutorial

Backgrounds and borders — Background images, their repeat, size and position, border styles, rounded corners and outline.

Thanks for reading!