The background-repeat property repeats a background image.
Options include: repeat horizontally, vertically, tiled, or never.
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>
The background-repeat property accepts two values for horizontal and vertical repeat.
Specifying one value is treated as both repeat behaviors.
background-repeat: repeat | repeat-x | repeat-y |
no-repeat | initial | inherit;
| 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. |
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>
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 |
