Making A Fixed Body Background On Dreamweaver

This tutorial will show you how to create a “fixed” background once you have already placed an image in Dreamweaver. A fixed background is used when you want your content or text of your page to scroll but have background image stay in place. This tutorial also shows how to position that fixed image at the top of your screen and center it. So, when you scroll on your browser the content will move but the background will stay put. And when you scale your website on another browser, the background stays centered with it.

View end result in action:

You will need the Dreamweaver program. This takes no more than few minutes to follow step by step, but once you know which buttons to push, it will take no more than seconds.

Step 1:

Once you have placed your image in Dreamweaver using the page properties button you will go to CSS Styles panel. If the panel is not open or doesn’t show on your screen you can simply go to Window> CSS Styles.

The box will appear in the upper right corner in Dreamweaver. The tab will say “CSS styles”

Step 2:

Select “body” inside of the CSS Styles box. This is simply done by double clicking on it.

After double clicking “body” another box will appear that says, “CSS rule definition for body” at the top of the box.

Step 3:

In the “CSS rule definition for body” box select the word “background” located on the left side of the box.

You will notice that your image info for your background image is already there as well as a background color.

Step 4:

In the option that says, “background-attachment”, select the word “fixed”.

This is what allows the picture of the background to stay where it is while having the rest of your content or text able to scroll.

Step 5:

Now select the “background-position (x)” to “center.” Then press Apply.

You’ll notice that your background image has been moved and centered.

Step 6:

Lastly select “background-position (Y)” and choose “top”. And click apply again.

This changes the vertical position of your image. In this case selecting “top” makes sure that your background image will be located at the top of the page.

Step 7:

Once all of these options have been chosen, go ahead and click ok.

Congratulations!

What you’ve created is a background image that is centered starting at the top of your screen and will always be “fixed”. So, when you scale on another browser, the background stays centered with it. And when you scroll the content will move but the background will stay put.

About this tutorial:

I got this information and mini clip from Lynda.com, this site can teach you a lot of things. Check it out! www.lynda.com