Just a couple of suggestions, this is from WDG
CODE
Syntax: background-repeat: <value>
Possible Values: repeat | repeat-x | repeat-y | no-repeat
Initial Value: repeat
Applies to: All elements
Inherited: No
The background-repeat property determines how a specified background image is repeated. The repeat-x value will repeat the image horizontally while the repeat-y value will repeat the image vertically. For example:
BODY { background: white url(candybar.gif);
background-repeat: repeat-x }In the above example, the image will only be tiled horizontally
You may want to stop your banner from repeating by using no repeat. The affect will be your banner will be short (lengthwise).
If you want to limit the height of your banner you could add
CODE
height: 80px;
to your banner id. The affect will be your graphic wil be cut off (I think it will just crop the bottom).
A suggestion would be to make the banner the exact height that you want and then make the graphic the exact same height. Otherwise you will get interesting and mostly unexpected results from different browsers (just because browsers interpret css differently).
As far as the size of your banner, I would suggest this...
Make the background color the same as the background color of your image. Then place the img tag inside your banner div. It would look something like this.
CODE
<div id=banner>
<div align="center">
<img src="pathtoimage/yourimage.gif>
</div><!--end align center>
</div><!--end id banner-->
This way your banner image is always centered in the browser window and the background color fills in to the width of the browser window.
To put it another way, you are pasting your image on top of the background color (and if you match the background color image properly) you will visually get a seamless blend.
hope this helps
t&e