Background repeating

The background-repeat property is used in combination with the background-image property; in other words if there is an image specified as background then the background-repeat property defines whether the image will be tiled (repeated) or not.

The background-repeat property contains following information:

value: repeat, repeat-x, repeat-y, no-repeat or inherit;
initial: repeat;
applies to: all elements;
inherited: no;
percentages: N/A;
media: visual;
computed value: as specified;

The value repeat will make the image repeat horizontally and vertically. The values repeat-x and repeat-y will repeat the image horizontally and vertically in respective order. The value no-repeat naturally will not repeat the image, making only one copy of the background image.

Example

CSS background-repeat property example:

<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
div {
	position:relative; overflow:hidden;
	width:100%; height:120px;
	background-image:url('../../../img/tutorials/back_ex3.png');
	background-repeat:no-repeat;
	background-position:center;
}
div+div {
	background-repeat:repeat-x;
	background-position:center 40%;
}
p {
	position:relative;
	top:00px;
}
</style>
</head>

<body>

<div>
	<p>This background is not repeated</p>
</div>
<div>
	<p>This background is repeated horizontally</p>
</div>
</body>
</html>

›› go to examples ››

Background repeating

Example

CSS background-repeat property example:

Comments

About

Contact

Get Connected