CSS background-repeat property

The background-repeat property repeats a background image.

Options include: repeat horizontally, vertically, tiled, or never.

Example

#

A background image that repeats horizontally.

<style>
  .bg-x-repeat {
    background-image: url("/img/css/cardplayers.jpg");
    background-repeat: repeat-x;
    height: 300px;
  }
</style>

<div class="bg-x-repeat"></div>

Using background-repeat

The background-repeat property accepts two values for horizontal and vertical repeat.

Specifying one value is treated as both repeat behaviors.

Syntax

background-repeat: repeat | repeat-x | repeat-y | 
                   no-repeat | initial | inherit;

Values

#

Value Description
repeat Default. Repeats background image vertically and horizontally
repeat-x Repeats background image horizontally
repeat-y Repeats background image vertically
no-repeat Does not repeat background image
space Repeats background image without clipping
round Repeats background image and scales them to fill the entire space
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different background-repeat values.

<style>
  .bg-example {
    background-image: url("/img/css/cardplayers.jpg");
    background-repeat: repeat;
    height: 400px;
  }
</style>

<div class="bg-example"></div>

Browser support

This table shows when background-repeat support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides