Image Sizing

[paul8agrape]

Okay so I've posted here before and admitted to being a bit of a novice, but I am generally a fast learner. :)

This is a test site that I'm tinkering around with images on. -->
http://rain.edchinn.com/. This is an shtml page that is formatted with a CSS page (code below) and has calls to 2 SSI files (header and footer pages).

I've done the header and footer rather sloppily now and just have jpgs that I enlarged and have tiled. But what I really want to do is have an image as the background but have it be a particular size (filling up the entire 80px) with a width of 100% essentially. Same for the header. So the image would look relatively the same in different resolutions. Does it make sense what I'm wanting?

I'm also curious how I'd center the center image vertically? I don't want all my pages (in the container div) to be centered vertically, just this one with the image. Thanks a lot


body {
margin:0;
border:0;
padding:0;
height:100%;
max-height:100%;
font-family:arial, verdana, sans-serif;
font-size:76%;
}

* html body {
padding:80px 0 50px 0;
overflow:hidden;
}

/* for internet explorer */

#container {
font-family:Georgia;
font-size: 1.2em;
position:fixed;
top:80px;
left:0;
bottom:80px;
right:0;
overflow:auto;
background:#D2C491;
color:#000000;
}

* html #container {
height:100%;
width:100%;
}

h1 {
color:#3D5801;
}

h2 {
color:#614215;
}

h3 {
color:#000055;
}

h4 {
color:#000055;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
}

a:link {
color: #3D5801;
}
a:visited {
color: #000055;
}

q:before, q:after {
content: ""; }

blockquote, ul.disc {
color: #000055;
font-weight: bold;
}

ul.disc {list-style-type: disc;
}

#header {
position:absolute;
top:0;
left:0;
width:100%;
height:80px;
overflow:auto;
color:#FFFFFF;
}
* html #header {height:80px;}


#footer {
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:80px;
overflow:hidden;
text-align:right;
color:#FFFFFF;
background:#000000;
}
* html #footer {height:80px;}