Adding Top Banner Image

:: "Adding a banner will give your page more visual impact ..."

Our completed template is certainly funtional but there is little in the way of visual or graphic impact.

So... lets place an image - a 750 x 150 ( pixel) graphic right across the top of the page.

You'll need to create your own with the above dimensions and name it logo-750.jpg; save it to your web folder.

We will need to edit the style sheets here...these are the two files with the .css extensions...here we go...

Step 1. Edit Style Sheets

Navigate to C\:your-folder-name\style-moz.css
Right mouse click on the file - open it with notepad
scroll down the page and locate this block of code:
div#top {
width:750px;
height:150px;
border-top:10px solid #E3E5C4;
margin:0px auto;
padding:0px;
}
Now copy this line exactly: background:url(logo-750.jpg) left top no-repeat;
Then paste the line into the div tag like this :
div#top {
width:750px;
height:150px;
border-top:10px solid #E3E5C4;
margin:0px auto;
padding:0px;
background:url(logo-750.jpg) left top no-repeat;
}
Save style-moz.css to your web folder with your new changes
Now, navigate to C\:your-folder-name\style-IE6.css
Repeat the steps above for this style sheet copying and pasting the background image code.
Save style-IE6.css to your web folder with your new changes