background image repeat


background-repeat: ***;

Browser
Internet Explorer Firefox Opera

The background-repeat property specifies how a background image is repeated.


div {
background-image: url(image/back.gif);
background-repeat: repeat-y;
}


Property Value Explanation
background-repeat repeat the image is repeated both horizontally and vertically (default)
repeat-x the image is only repeated horizontally
repeat-y the image is only repeated vertically
no-repeat the image is displayed only once

Example

<html>
<head>
<title>TAG index</title>

<style type="text/css">

div {
width: 70%;
height: 200px;
margin: 20px 0;
background-color: #ffffff;
background-image: url(image/back.gif);
color: red;
}

#example1 { background-repeat: repeat; }
#example2 { background-repeat: repeat-x; }
#example3 { background-repeat: repeat-y; }
#example4 { background-repeat: no-repeat; }

</style>

</head>
<body>

<div id="example1">The image is repeated both horizontally and vertically</div>
<div id="example2">The image is only repeated horizontally</div>
<div id="example3">The image is only repeated vertically</div>
<div id="example4">The image is displayed only once</div>

</body>
</html>
Output
The image is repeated both horizontally and vertically
The image is only repeated horizontally
The image is only repeated vertically
The image is displayed only once

Background Image back.gif