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

Fast & Reliable Web Hosting  |  Cheap Web Hosting $9/Year


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

i digitalemotion Photoshop Tutorials
Tutorial Man Wallpaper Stock  More

Resources