Learn HTML step-by-step from A to Z or improve your professional skills.  Home HTML and CSS Tutorials Fixed Background

Fixed Background


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.

Fixed Background
Fixed Background Example.

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.

Author's URL: Depiction.net
Learn HTML step-by-step from A to Z or improve your professional skills. More Tutorials: Featured Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com

Reader's comments
comments hjuiml September 20, 2011 says:
dfg reyter eryte5trer
Reply
comments Tom May 22, 2011 says:
Excellent script!!!

Worked very well on our site

Tom
Mombasa Kenya

Reply
comments Candace April 12, 2011 says:
Awesome! That made my profile look alot better than less newbie without the need to turn to Wix - since I don't like overly flashy pages that require lots of loading.

Thanks, very much! ?

Reply
comments Alok May 21, 2010 says:
Thanks it helped me a lot
Reply
comments Serraman March 02, 2010 says:
Very useful.
Thank You.

Reply
Add comments to "Fixed Background"

Captcha