Problem with css background repeat-y

[Marfola]

I am trying to manage the background repeat using CSS. I have tried as many html hacks as I can think of, but none seems to work.
Here is a sample of my style sheet

.content{
padding: 0px;margin:0px;
width:961px;height:100%;
float:left;
}
#bgLeft {
width:5px;height: 100%;
min-height: 100%;
background: url(img/bg_left.gif) repeat-y;
float:left;
}
#bgRight {
background:url(img/bg_right.gif) repeat-y 100%;
width:5px;height:100%;
min-height:100%;
float:left;
}
.bodyMain{
padding: 0px;margin:0px;
width:735px;height:100%;
background-color: #f8f8f8;
float:left;
}

And here is a copy of my html

<div class="content" align="left">
<div id="bgLeft"> </div>
<div class="bodyMain" >
<!-- ###CONTENT### -->
</div>
<div id="bgRight"> </div>
</div>
 

n.b.: the content of my site must have two lines images (one left and one right - see bgLeft and bgRight stylesheet), whose height depends on the content space.

In IE7 I can see the bgLeft and bgRight images, but not for all the vertical height, in Firefox I cannot see nothing.
Could someone help me?

[edited by: Marfola at 11:33 am (utc) on July 29, 2008]

[Marshall]

You will need a fixed height for the two background div's. The 100% property is not going to do anything for you.

Marshall

[Marfola]

Thanks, but the content change from page to page, so the height is variable. I cannot define it as a fixed height.
Is there any tricks that enable me to use background repeat with a variable height?

[Marshall]

Why don't you combine the images into one wider one then insert it into the content section making it wider to accommodate the images. You would merely have to add left and right padding to the content area for the images to show.

.bodyMain{
padding: 0px 5px;
background: url(img/bg_left_and_right_combined.gif) repeat-y;
margin:0px;
width:735px;height:100%;
background-color: #f8f8f8;
float:left;
}

Marshall

[webfoo]

Try this:
background-repeat: repeat-y;