Fixed backgrounds
Fixed backgrounds are just that - fixed! They don't move as the user scrolls the page meaning the background is always showing on the page. Fixed backgrounds allow CSS to be used to create a number of design effects. Before continuing with this tutorial it is recommended you already have some CSS experience
The properties
The CSS properties we will be using in this tutorial are:
- background-image
- background-repeat
- background-position
- background-attachment
background-image
The first thing to do is to set the background image. The background-image property allows an image to be set as the background. The path to the image can be relative or absolute. The image doesn't have to be on the same domain either. To add a background image to the page we use the background-image property on the body selector like so:
body {
background-image:url('/images/background.png');
}background-repeat
The next step is to set the repeat value of the background. This will most likely be either no-repeat or repeat-x. This is to be added below after the background-image property
body {
background-image:url('/images/background.png');
background-repeat:no-repeat;
}background-position
Next step is to position the background image. For a fixed background this is probably best done using keywords. For a watermark the image should be placed in the center of page which can be done as follows:
body {
background-image:url('/images/background.png');
background-repeat:no-repeat;
background-position:center center;
}background-attachment
The last step is to make the background fixed - by default is scroll. So the final code is as such:
body {
background-image:url('/images/background.png');
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
}And that's that - your first fixed background. For an example of this head over to our phpBB3 styles website where we have used this technique to add a fixed background image in the bottom right of the page.
