HTML/CSS/Box Model/background attachment

Материал из Web эксперт
Перейти к: навигация, поиск

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>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/background_attachment&oldid=5249»