background image to expand with text

[elv8]

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.

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;
}

html code:

<div id="mainContent">

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

</div>

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.

[Webitseo]

If I understand correctly what you're asking, this might help. Try adding this to the #mainContent element : background-attachment: scroll;

[Webitseo]

Try this:
#mainContent {
height:500px;
width: 915px;
}
#mainContent p{
background-image: url(bg.jpg);
background-repeat: repeat-y;
background-color: #35281E;
width: 915px;
}

Obviously you'll need to put your text in <p></p> brackets.

This sets the height of the content, and keeps the color with the size of the entire text area.