SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials HTML and CSS Tutorials Fixed Image Background for the Page

Fixed Image Background for the Page

ades Tutorials Feb 14, 2006

Fixed Image Background for the PageIn this tutorial you will learn how to put a fixed image background on your pages, that is the background that stays in the center of your page even when you scroll the page.

1. First create a new page in your HTML editor (Dreamweaver) and save it as fixed.html or any name you like and download this image or use your own if you have one ready. Now go to your <head> section and insert the following code in it.

<style type="text/css">
body { background: url(fixedbg.gif) }
</style>

We will do this one at a time, so that you will understand how CSS works and not just copy and paste the code to achieve this effect. However if you want to copy and paste the code please get it from bottom of this page.

<style type="text/css"></style> with this code we are declaring CSS, all the code between this will be considered as a CSS code. Basically we are telling a browser to render this code as a CSS.

Since we are applying this background to the whole page we need to specify body { } tags. And since we applying image and not a normal HTML color code we need to put background: url( ImageName ) inside the curly braces {}. So basically body { background: url(fixedbg.gif) } means that this particular page should have fixedbg.gif as a background. The page with this code should look like this.

2. We had the image as a background now, however we want it to be in the center and not tiled to the whole page. To achieve this result we need to add center no-repeat; to our code in the curly braces. What it does is that it will place our image in the middle of the page, and tile effect will be gone.

<style type="text/css">
body { background: url(fixedbg.gif) center no-repeat;}
</style>

After we have added this code our page looks like this. As you can see the center of the page here means the real center of the page and not the center of screen, so if you have a long page you need to scroll to see the background image.

3. Let's bring our image to the center of the screen and make it fixed, meaning we want it to stay there even if we scroll the page. To achieve this effec we just have to add one word to our existing code fixed. Our final code should look like this now.

<style type="text/css">
body { background: url(fixedbg.gif) fixed center no-repeat;}
</style>

Our page looks like this now, as you can see the scrolling does not affect the backgound image.

Final Code:

<style type="text/css">
body { background: url(fixedbg.gif) fixed center no-repeat;}
</style>

subscribe to newsletter