Tutorials from Koby Studios

Full-height Background with CSS

In this tutorial you will learn how to extend the background of your content area to fit the full height of your viewer’s browser regardless of their screen resolution using CSS and Dreamweaver CS4.

Before you start this tutorial you will need to aquire the graphic I have used as my content area background.  You can download the graphic we will be using by clicking here, or you can create you own easily in Photoshop using my Vertical Background Image tutorial.

To start we are going to open Adobe Dreamweaver.  If you have not disabled it, you want to select CSS from the Create New menu on the welcome screen like shown in the image below.  If you’ve disabled the welcome screen, simply go to File -> New and select CSS from the blank page types.  The window will open in Code mode and you’re ready to start.

Open CSS under Create New

Open CSS under Create New

 The next step is to define your page’s properties and dimensions.  Since we want this page to take up the whole screen we will set the body and html tags to no margins, no padding, and 100% width and height and the color of the background to match the one you used in the background of your image. An example of the code is below.

@charset "utf-8";

/* CSS Document */

body,html {
 padding:0px;
 margin:0px;
 width:100%;
 height:100%;
 background-color:#416393;
 text-align:center;
}

Now that our page is set up to take the whole browser window we need to define the container that will hold the background image and set it to take the whole height of the page.  Set the width of your background container to the width of your background image.  This will help keep all of your page’s content in one place and inside the area where your text will appear.  For this example, my image is 780 pixles wide. 

#bodyBG {
  width:780px;
  min-height:100%;
  background-image:url(images/bg-final-full.jpg);
  background-repeat:repeat-y;
}

Now save your file.  I used a simple name like CSS.css.  Create a new blank HTML page (File -> New).  Go into Code mode by selecting the Code button on your Dreamweaver panel and make your code look like the example below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="CSS.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="bodyBG">

</div>
</body>

</html>

Save all your work (use any name you wish to save your HTML file).  Now you can preview it in Internet Explorer (or a browser of your choice) to see what it will look like.  You’re page should look like the example below.  Click the image to see a full version of the page.

An example - Click for full version

An example - Click for full version

Now you are done.  You can insert the rest of your content as you see fit using the CSS page you created to make more containers and settings for your site.


January 23, 2009 - Posted by Brian Koby | Dreamweaver | , , , | No Comments Yet

No comments yet.

Leave a comment

« Previous | Next »