CSS background-attachment
Description
Use the background-attachment property to fix or scroll a background image of an html element.
If the value is fixed then when or if the element is scrolled the background image will stay fixed in place. If the value is scroll then the image will scroll with the element.
This is typically used on the body tag when the html page has a background image.
background-attachment: fixed;
or
background-attachment: scroll;
or
background-attachment: inherit;
or
background-attachment: local /* CSS 3 */
See also: background-color, background-position, background-attachment, background-repeat
Examples for css background-image
This is the image we will be using as our background:
Example 1:
This example shows a
fixed background image. When the user scrolls the background stays fixed. This is achieved by using the
background-attachment: fixed; value.
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test
test test test test test test test test test
test test test test test test test test test
test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
<style>
#test {
background-image: url(./images/grad.gif);
background-attachment: fixed;
/*
the three following items below do the following:
a) fix the width and height of the containing div
to be smaller than the width and height of the content.
b) we set the overflow style so that when the content is
bigger than the containing element scroll bars appear
to allow users to scroll the element contents.
*/
height:200px;
width:300px;
overflow:scroll; }
</style>
<div id="test">
test test test test test test test test test test test <br/>
test test test test test test test test test test test <br/>
test test test test test test test test test test test <br/>
test test test test test test test test test test test <br/>
<div style="border:3px solid white; margin:20px; width:80%">
test test test test test test test test test <br/>
test test test test test test test test test <br/>
test test test test test test test test test <br/>
test test test test test test test test test <br/>
</div>
test test test test test test test test test test test <br/>
test test test test test test test test test test test <br/>
test test test test test test test test test test test <br/>
test test test test test test test test test test test <br/>
</div>Give it a go!
Example 2:
This example shows a
scrolling background image. When the user scrolls the element contents the background scrolls too. This is achieved by using the
background-attachment: scroll; value.
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test
test test test test test test test test test
test test test test test test test test test
test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
<style>
#test2 {
background-image: url(./images/grad.gif);
background-attachment: scroll;
/*
the three following items below do the following:
a) fix the width and height of the containing div
to be smaller than the width and height of the content.
b) we set the overflow style so that when the content is
bigger than the containing element scroll bars appear
to allow users to scroll the element contents.
*/
height:200px;
width:300px;
overflow:scroll; }
</style>
<div id="test2">
test test test test test test test test test test test <br/>
test test test test test test test test test test test <br/>
test test test test test test test test test test test <br/>
test test test test test test test test test test test <br/>
<div style="border:3px solid white; margin:20px; width:80%">
test test test test test test test test test <br/>
test test test test test test test test test <br/>
test test test test test test test test test <br/>
test test test test test test test test test <br/>
</div>
test test test test test test test test test test test <br/>
test test test test test test test test test test test <br/>
test test test test test test test test test test test <br/>
test test test test test test test test test test test <br/>
</div>Give it a go!
Values for <background>
| background-image |
url(URL) e.g. url(images/image1.jpg)
none |
Specifies an image to display in the background of the element |
| background-color |
red
#ff0000
rgb(100%,0%,0%)
transparent |
Set the background color of the element. |
| background-repeat |
repeat
repeat-x
repeat-y
no-repeat |
Specifies the repeat style of the background image. repeat-x causes tiling to the left and the right, repeat-y causes tiling up and down |
| background-attachment |
scroll
fixed |
Specifies if background image scrolls or is fixed when the page is scrolled |
background-position
(note two values one for x and one for y |
For y
%|px|top|center|bottom
For x:
%|px|left|center|right
e.g. top left
e.g. 50% right
e.g. 50% 20px |
Specifies the position of the background image. Or if tiling then indicates the origin of the tiling |