HTML/CSS/CSS Attributes and Javascript Style Properties/background attachment

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

"background-attachment" Example

    
<html>
<head>
</head>
<body>
<div style="background:blue url(http://www.wbex.ru/style/logo.png) repeat top left; 
            width:200; 
            border:3; 
            height:150; font-size:14">
            <br><br><br><br><br><br><br><br><br>
            </div>
            <br><br><br><br><br><br><br><br><br>
<div style="background-color:red; 
            background-attachment:fixed; 
            background-image:url(http://www.wbex.ru/style/logo.png); 
            background-repeat:repeat; 
            background-position-x:top; 
            background-position-y:left; 
            width:200; 
            border:3; 
            height:150; 
            font-size:14">
            background-attachment is fixed.
            </div>
</body>
</html>



Use background-attachment:fixed to prevent the image from scrolling.

 
<!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">
<head>
<title></title>
<style type="text/css">
* .bg-ry {
  background-attachment: fixed;
  background-position: center top;
  width: 300px;
  height: 300px;
  background-image: url(http://www.wbex.ru/style/logo.png);
}
</style>
</head>
<body>
  <p><div class="bg-ry">Background image repeat-y &rarr;</div></p>
  
</body>
</html>



Use background-attachment:scroll to scroll a background image when the user scrolls the content. This is the default value.

 
<!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">
<head>
<title></title>
<style type="text/css">
* .bg-ry {
  background-attachment: scroll;
  background-position: center top;
  width: 300px;
  height: 300px;
  background-image: url(http://www.wbex.ru/style/logo.png);
}
</style>
</head>
<body>
  <p><div class="bg-ry">Background image repeat-y &rarr;</div></p>
  
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/background_attachment&oldid=4943»