The background-repeat property

CSS can repeat the background image you specify, to fill out the entire container. In fact, this is the default behavior, which is great for a lot of situations. This allows you to create a small, textured background image and then have it repeated as many times as needed, to fill out the available background. We already saw this behavior in the first example, but what are the alternative?

Background repetition is controlled through the background-repeat property, which has several possible values. Here's an example showing you them all:

<style type="text/css">
.box {
	background-image: url('http://css3-tutorial.net/images/blu_stripes.png');
	width: 200px;
	height: 150px;
	margin: 10px;
	border: 1px solid black;
	text-align: center;
	font-weight: bold;
	font-size: 2em;
}
</style>

<div class="box" style="background-repeat: repeat;">
	Repeat
</div>

<div class="box" style="background-repeat: repeat-x;">
	Repeat-X
</div>

<div class="box" style="background-repeat: repeat-y;">
	Repeat-Y
</div>

<div class="box" style="background-repeat: no-repeat;">
	No-Repeat
</div>

In the first box, we use the default value of repeat, which basically means that the background image will be repeated in both directions. In the next two boxes, we use repeat-x and repeat-y - the first one repeating the background only horizontally, while the latter only repeats vertically. The last box uses the no-repeat value, which means that the image will be displayed as it is. In any case, if the background is actually bigger than the containing element, then the image will be clipped - only the required portion of it, to fill the containing element, will be used, with the rest being invisible.

Summary

The background-repeat property is very powerful, allowing you to define exactly how and even if you want a background image to be repeated inside an element. In the fluid world of web design, where elements usually doesn't have a fixed size, this is really great. However, when you don't want any repeating to occur, you may need more control of where the background is placed. This can be achieved with the background-position property, which we'll discuss in the next article.