The background-repeat property (CSS Reference)
Introduction
The background-repeat property is used in conjunction with
the background-image to set the set whether the image should be repeated or
not. If it is repeated then you can set it either to horizontal or vertical. The
following example demonstrates the usage.
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>background-repeat Demonstration</title>
<style type="text/css">
body
{
background-image:
url(http://topxml.com/images/topxml_site.gif);
background-repeat:
no-repeat;
background-position:
center;
}
.imgOnX{
background-image:
url(yellow_black.jpg);
background-repeat:
repeat-x;
}
.imgOnY{
background-image:
url(yellow_black.jpg);
background-repeat:
repeat-Y;
}
</style>
</head>
<body>
<h1><p class="imgOnX">The image should
appear on X-Axis</p></h1>
<h1><p class="imgOnY">The image
should<br/> appear on Y-Axis</p></h1>
</body>
</html>
Output
Values
|
Name:
|
Description:
|
|
no-repeat
|
The image will not be repeated.
|
|
repeat
|
The image will be repeated.
|
|
repeat-x
|
The image is only repeated on the x-axis.
|
|
repeat-y
|
The image is only repeated in the y-axis.
|
|
Email TopXML