CSS Background Image

[Custer]

I'm having a lot of trouble with a background image that I want to cover my middle column. It fits perfectly in IE, but in FF, it repeats horizontally, so I put a repeat for only the y, and it's way too thin...

 

Here's my code:

 

body {
background-color: #000000;
font-family: Verdana, Tahoma, Arial;
font-size: 11px;
margin:0px 0px 0px 0px;
height: 100%;
}


#header { background-color:#000000;
height: 150px;
}

#leftbox { float:left;
width:15%;
font-color: black;
background-image:
url('/images/dkredblk.gif'); }

#rightbox { float:right;
width:16%;
background-color:#000000; }

#middlebox { 
margin-right:16.5%;
margin-left:15.5%;
margin-bottom: -18px;
margin-top: -18px;
font-color: brown;
background-image:
url('../images/membersbackground.gif');
background-repeat: repeat-y; }

#footer { 
position: static;
clear: both;
background-size: 100%;
background-color:#000000;
color: red; }

 

Now I've been told that you can't stretch background images in CSS at the moment, so how could I make this background image go in my middle column without repeating on teh x axis but repeating as far as the content needs on the y axis?

[AndyB]

http://www.w3schools.com/css/css_background.asp