Tutorials > CSS > Fixed Background
Learn how to add a backgroud image that doesn't move as a page is scrolled.
This short tutorial will show you how use a fixed background image. With a fixed background, the background image doesn't move as the page is scrolled.
Place the following code in the head section of you page.(between <head> and </head>)
Code:
------------------------------------------------------------------------
<style type="text/css">
body
{
background-image:
url("/images/image.gif");
background-repeat:
no-repeat;
background-attachment:
fixed
}
</style>
------------------------------------------------------------------------
backgroud-repeat- Sets the behavior of the background. To repeat the background as needed, change no-repeat to repeat.
background-attachment- Sets whether a background image is fixed or scrolls with the rest of the page.
The background image can also be positioned on the page by using the background-position property.
Code:
------------------------------------------------------------------------
background-position: center
------------------------------------------------------------------------
Other values besides center can be used with background-position.
x% y%- Sets the relative postion of the image. The first value is the horizontal position and the second value is the vertical.
x-pos y-pos- Set the position using pixels. (ex. 200px 300px) The first value is the horizontal position and the second value is the vertical.
