HTML/CSS/Box Model/background attachment
Версия от 09:21, 26 мая 2010; (обсуждение)
background-attachment: scroll
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Positioning Backgrounds</title>
<style type="text/css">
body {
font: 16px Verdana, Arial, Helvetica, sans-serif;
margin: 20px;
color: black;
background-color: #FFFFCC;
background-image: url(background-square.gif);
background-attachment: scroll;
}
</style>
</head>
<body>
<p>this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. </p>
<p><em>MA</em></p>
</body>
</html>
Set background-attachment to fixed
<!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" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
h1, h2, h3 {
font-size: 200%;
background-image: url(bkgd2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
padding: 1.5em;
text-align: center;
color: white;
}
</style>
</head>
<body>
<h1>header 1</h1>
<p>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. 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. This is a text. This is a text.
This is a text. This is a text. This is a text. This is a text.</p>
</body>
</html>