Web design & Internet tutorials
Search the site...
Home» FAQ » CSS » How do I create a web page design with a large background image and content that floats over the middle?

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

Posted by Janine Warner - August 14, 2012 - CSS, Dreamweaver, FAQ, Graphics
2

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

css, dwcs4, dwcs5, dwcs6

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

  1. James says:
    October 18, 2012 at 2:22 pm

    A testimonial referred to Total Training Videos?

  2. Janine Warner says:
    April 12, 2013 at 3:22 pm

    I have created videos for many training companies now, including TotalTraining, KelbyTraining, Lynda, and creativeLIVE.

Leave a Reply

You must be logged in to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1&1 Hosting

Recent Posts

  • Google Analytics for Creative Professionals – new class on Pluralsight
  • Follow the cursor JavaScript sample
  • Part Four: Tools that let amateurs look like professionals
  • Part Three: Influence, Klout and finding what’s hot
  • Best social media tools part 2: Twitter, Instagram and Pinterest




© 2001 - 2020 All rights reserved. DigitalFamiliy.com | Terms & Conditions of Use | Privacy Policy

This is a demonstration store. No physical products will be shipped. Dismiss