background-attachment: fixed;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

The background-attachment property specifies whether a background image is fixed or scrolls.


div {
width: 70%;
height: 200px;
overflow: scroll;
background-image: url(image/back.gif);
background-attachment: fixed;
}
Property Value Explanation
background-attachment fixed specifies the fixed
scroll specifies the scrolling (default)

Example


<html>
<head>
<title>TAG index</title>

<style type="text/css">

div {
width: 70%;
height: 200px;
overflow: auto;
margin: 20px 0;
background-color: #ffffff;
background-image: url(image/back.gif);
color: red;
}

div p { margin-bottom: 40px; }

#example1 { background-attachment: fixed; }
#example2 { background-attachment: scroll; }

</style>

</head>
<body>

<div id="example1">
<p>The background image is fixed in the window.</p>
<p>Scroll</p>
...
</div>

<div id="example2">
<p>Scrolling background image.</p>
<p>Scroll</p>
...
</div>

</body>
</html>
Output

The background image is fixed in the window.

Scroll

Scroll

Scroll

Scroll

Scroll

Scroll

Scroll

Scrolling background image.

Scroll

Scroll

Scroll

Scroll

Scroll

Scroll

Scroll

Background Image back.gif