Web Site Design – How to Create a Background Image for a 3 Column Template

Recently I was asked to design a 3 column web site for Handyman Services Loudoun County. The purpose of the web site was to create a professional online appearance for the business that clearly illustrates who they are, what services they offer and the locations they cover.

I first created a few image designs in Fireworks to give my client a number of options to choose from…e.g. design, colors, layout of images and content. He chose a 3 column design (2 outer green coloums, middle white column) with a a green gradient background.

How to create the css background images

Step 1. Green gradient image for web site background

I created a green gradient image (fading from green to white) for the background color of the web site using Fireworks then positioned it on the web site with CSS.

CSS code for body background:


body {
font-family:Arial, Helvetica, sans-serif;
color:#336666;
background-image: url(images/bg_green_outer.jpg);
}


Step 2. Background image for content

The 3 columns consist of a white middle column for the main content and 2 light green outer columns to prominently display photos of construction projects. I sliced a 1px wide by 2000 pixel length from the original image I had created in Step 1 then positioned it with CSS

CSS code for content background:


#wrapper{
width: 1000px;
background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
padding: 0px;
background-image: url(images/bg_inner.gif);
background-repeat: repeat-y;
}


Step 3. Create header background

I positioned the logo as a background image in the header with CSS


#header{
margin: 0;
padding: 0;
background-color:#FFFFFF;
height: 150px;
background-image: url(images/All%20Seasons272.gif);
background-repeat: no-repeat;
background-position: 50px 0px;

}


Step 4. Create menu background color

The web site has top and bottom navigation menus with a dark green background.


#topnav ul{
padding-bottom:3px;
padding-left:15px;
padding-right:15px;
padding-top:2px;
margin: 0;
background-color: #336633;
}


The background images help present a nice layout for the web site that can easily be altered or changed using CSS positioning.