CSS background-repeat Property

Example

Repeat a background-image only vertically:

body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}

Try it yourself »

---

Definition and Usage

The background-repeat property sets if/how a background image will be repeated.

By default, a background-image is repeated both vertically and horizontally.

Default value:	repeat
Inherited:	no
Version:	CSS1
JavaScript syntax:	object.style.backgroundRepeat="repeat-y"

---

Browser Support

The background-repeat property is supported in all major browsers.

Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".

---

Tips and Notes

Tip: The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element’s top left corner.

---

Property Values

Value	Description	Play it
repeat	The background image will be repeated both vertically and horizontally. This is default	Play it »
repeat-x	The background image will be repeated only horizontally	Play it »
repeat-y	The background image will be repeated only vertically	Play it »
no-repeat	The background-image will not be repeated	Play it »
inherit	Specifies that the setting of the background-repeat property should be inherited from the parent element

---

Try it Yourself - Examples

How to repeat a background image both vertically and horizontally
This example demonstrates how to repeat a background image both vertically and horizontally.

How to repeat a background image only horizontally
This example demonstrates how to repeat a background image only horizontally.

How to display a background image only one time
This example demonstrates how to display a background image only one time, with no-repeat

Posted in: Background-repeat,Blog,CSS