HTML/CSS/CSS Attributes and Javascript Style Properties/background repeat
Содержание
"background-repeat" Example
<source lang="html4strict">
<head> <style>
- myL {background-color:#EEEEEE;
background-image:url("http://www.wbex.ru/style/logo.png");
height:500;
background-repeat:repeat;
} </style> </head> <body>
</body> </html>
</source>
background-repeat: no-repeat
<source lang="html4strict">
<!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" xml:lang="en" lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>No repeat</title>
<style type="text/css">
body {
background-image: url(images/background.gif);
background-repeat: no-repeat;
}
</style>
</head> <body>
this is a text.
this is a text.
this is a text.
this is a text.
this is a text.
this is a text.
this is a text.
this is a text.
this is a text.
</body> </html>
</source>
background-repeat: repeat-x
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
html, body {
height: 1000px;
}
body {
background-image: url("backgroundImage.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
</body>
</html>
</source>
background-repeat: repeat-y
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title></title>
<style type="text/css">
html, body {
height: 1000px;
}
body {
background-image: url("backgroundImage.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
</body>
</html>
</source>
The background-repeat Property
<source lang="html4strict">
Value Purpose repeat This causes the image to repeat to cover the whole page. repeat-x The image will be repeated horizontally across the page (not down the whole page vertically). repeat-y The image will be repeated vertically down the page (not across horizontally). no-repeat The image is displayed only once.
</source>
