The background-repeat property

The background-repeat property specifies how to repeat a background image of an element. By default, the image is repeated along both the X and Y axis, thus covering the entire available area.

Syntax

selector {
	background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

Values

Value	Description
`no-repeat`	An image will not be repeated at all.
`repeat-x`	An image will be repeated along the X axis.
`repeat-y`	An image will be repeated along the Y axis.
`repeat`	An image will be repeated along the X axis and Y axis.
`space`	An image will be repeated so many times to completely fill an area; if this fails, empty space is added between the images.
`round`	An image will be repeated so that an area fits an integer number of images; if this cannot be done, then the background images will be scaled.

Default value: repeat - covers the entire screen with a pattern.

Example

By default, the background image will cover the entire element:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Example

Let's make sure the image doesn't repeat itself:

<div id="elem"></div>

#elem {
	background-repeat: no-repeat;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Example

Now let the image repeat along the X axis:

<div id="elem"></div>

#elem {
	background-repeat: repeat-x;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Example

And now along the Y axis:

<div id="elem"></div>

#elem {
	background-repeat: repeat-y;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Example

Images that repeat along the axes can be positioned using the background-position property:

<div id="elem"></div>

#elem {
	background-repeat: repeat-y;
	background-position: top center;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Example

Let's see how the space value works:

<div id="elem"></div>

#elem {
	background-repeat: space;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Example

Let's see how the round value works:

<div id="elem"></div>

#elem {
	background-repeat: round;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

The background-repeat property

Syntax

Values

Example

Example

Example

Example

Example

Example

Example

See also