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: No versions of Internet Explorer (including IE8) support the property value "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
repeat	The background image will be repeated both vertically and horizontally. This is default
repeat-x	The background image will be repeated only horizontally
repeat-y	The background image will be repeated only vertically
no-repeat	The background-image will not be repeated
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

CSS tutorial: CSS Background

CSS reference: background-position property

HTML DOM reference: backgroundRepeat property

Complete CSS Reference