background image to expand with text

Hi,

I am having trouble getting a background image to be displayed in my main div content container. This is to create a background color. I have the main content container and inside of that container I have 3 other containers. These are the leftContent div, middleContent div and rightContent div. I want to have the background color to be visible throughout the 3 containers so I have placed it in the mainContent container.

[COLOR=”Blue”]CSS Code:

#mainContent {
background-image: url(bg.jpg);
background-repeat: repeat-y;
background-color: #35281E;
width: 915px;
height: 500px; *** only works with height for me? ***
}

#leftContent {
width:167px;
background-color:#E7E7E7;
float:left;
padding: 10px;
}

#middleContent {
float:left;
padding: 15px;
width: 417px;
}

rightContent {
float:right;
padding: 15px;
width:250px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #E7E7E7;
}[/COLOR]

[COLOR=”Teal”]html code:

<div id=”mainContent”>

<div id=”leftContent”> </div>
<div id=”middleContent”> </div>
<div id=”rightContent”> <div>

</div>
[/COLOR]
Can someone please advise if I have the css correct for the mainContent div as the only way I can get the image to display is by placing a height value into the mainContent div. This makes the page a certain height and when I add text into the middleContent container the text moves down but the background image is fixed to a certain height. However, I want this image to move downwards with additional text instead of been fixed to a certain height. Any help is appreciated.

regards,
elv8.

Also in #CSS _↴