Setting the Background repeat
Description
We can use background-repeat property to
control how the image will cover the whole area of background.
The allowed values for background-repeat
are described in the following list.
- repeat-x - Repeats the image horizontally; the image may be fragmented.
- repeat-y - Repeats the image vertically; the image may be fragmented.
- repeat - Repeats the image in both directions; the image may be fragmented.
- space - The image is repeated to fill the space without creating fragments, and the remaining area is allocated evenly around the images.
- round - The image is scaled so that it can be repeated without creating fragments.
- no-repeat - The image is not repeated.
You can set a value for both the horizontal and vertical repeats, but if you provide only one value, the browser will use that style of repeat in both directions.
But for repeat-x and repeat-y, the browser will use the no-repeat style for the second value.
Example
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!-- w w w.j a v a 2s . c o m-->
background-image: url(http://www.java2s.com/style/download.png);
background-size: 20px 20px;
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
This is a test. <br/>
</p>
</body>
</html>
The image is repeated horizontally across the element.