Fixed backgroung

**bsproductions** · 11-07-2004, 11:43 PM

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.

**cwboytx** · 11-17-2004, 08:41 PM

Originally Posted by bsproductions

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.

An even easier way to do it is like this:

<body bgproperties="fixed" background="/images/image.jpg">

**Pathoschild** · 11-17-2004, 09:13 PM

Only if you have a small website. Using an external stylesheet is the best way to do it if you have a larger website, because you can change the background on every page of your website by editting a single line in one file. Just put the following code in a file with a .css extension and link to it from every site. You can also summarise the code by putting all the properties into one. The #000 is the background color visitors will see if the background image is too small or doesn't load. You should always define a background color in case a problem occurs (white text on a white background annoys visitors, for some reason). Put the second code into the head section of your HTML file.

Originally Posted by stylesheet.css

body {background: url('/images/images.gif') no-repeat fixed #000;}

Originally Posted by index.html

**cwboytx** · 11-18-2004, 04:36 PM

Originally Posted by Pathoschild

Only if you have a small website. Using an external stylesheet is the best way to do it if you have a larger website, because you can change the background on every page of your website by editting a single line in one file. Just put the following code in a file with a .css extension and link to it from every site. You can also summarise the code by putting all the properties into one. The #000 is the background color visitors will see if the background image is too small or doesn't load. You should always define a background color in case a problem occurs (white text on a white background annoys visitors, for some reason). Put the second code into the head section of your HTML file.

Originally Posted by stylesheet.css

body {background: url('/images/images.gif') no-repeat fixed #000;}

Originally Posted by index.html

I didn't even think about that.... That is a very easy way to do it....

And the really good thing about it is, you only have to change 1 line of code to change the appearance of all pages that are linked to the stylesheet....

**Pathoschild** · 11-19-2004, 12:04 AM

CSS is beautiful.

**Inculpata1716** · 07-21-2005, 04:03 PM

Pathoschild I definitely think just like you.

Thread: Fixed backgroung

Thread Tools

Display

Fixed backgroung

Re: Fixed backgroung

Bookmarks

Bookmarks

Posting Permissions