How do I create a web page design with a large background image and content that floats over the middle?

Hi Janine,

I’m reading Dreamweaver for Dummies and enjoying it very much, but I’m stuck on how to set-up a page that has a background image and then has a smaller boxed area for the “live” or content containing area inset over the background.

Could you possibly tell me how to do this?

Jack

Hi Jack,

There are a couple of ways to achieve this look, but the simplest is to use the big image as the background image of the entire page (you can do that by choosing Modify > Page Properties — I recommend using the CSS options).

Advanced tip: add the style rule to the CSS code (Dreamweaver has no feature for this, but if you copy this into your body CSS rule, it will cause the background image to resize to fill the entire screen no matter how big the monitor, as it does on my Chameleon Engine site.

background-size: 100%;

To create the ‘live’ area for content, you’ll want to insert a div tag into the page that will surround all of your live content, and then create a style and apply it to the div that centers the box created by the div on the page. In that style, you’ll want to set a width for your site content. Most designers are setting that width to 960 pixels, which fits well on most monitors today.

A great shortcut for all of this is to start with one of the CSS Layouts included in Dreamweaver’s New Document dialog box. You should find instructions for working with CSS in chapters 5 and 6 of my Dreamweaver For Dummies book, and here are two tutorials specific to this task you can find on my website.

This tutorial shows how to customize a CSS Layout if you’re using Dreamweaver version CS3 or CS4

This tutorial reflects some of the changes to the CSS Layouts in version CS5

Hope that helps and I wish you all the best with your website,

Janine