Web Development Network  |  Sites:    Capital Tutorials    Internet Marketing Books    Arcade Games
Depiction- Webmaster Resources
Stock Image


Contributors: Digital Marketing Agency  |  High Performance RAID 10 SSD VPS in Europe  |  Advertise Here

Promo Code iStockphoto  |  Advertise Here


Misc Links: Submit Tutorials (Earn $$) l Advertising l Privacy Policy | Site Map

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>
------------------------------------------------------------------------

background-image- Sets the image to be used for the background
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.

top right, center left, bottom center, etc.
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.

 
 

Affiliates

BioRust Photoshop Tutorials
Tutorial Man Wallpaper Stock  More

Resources