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
back.gif
