Background stretch

I am trying to make it so that the div#container automatically stretches, and thus so does the background. How can I do this?
(http://nicks-world.co.uk/qw/redesign/)
Literally I want the footer to have more spacing from it.

Cacnel that.. It is because of the AJAX.

Cacnel that.. It is because of the AJAX.
ajax have nothing to do with that. Your footer must have 3 parts, left round corner, middle and right round corner, then the middle part can have any width you want.

regards

Ok, for starters, let's have a look at your #container CSS.


#container
{
background-image:url(images/bground.png);
background-repeat:repeat-y;
clear: both;
margin:0 auto;
display:block;
width:800px;
padding-bottom: 30px;
}


Since the background image you're using is just a grey box with solid grey borders, we can replace this with CSS.
Remove:

background-image:url(images/bground.png);
background-repeat:repeat-y;

and replace with:

border-right:solid 4px #DFDFDF;
border-left:solid 4px #DFDFDF;
background-color:#FFF;

Much better, the browser won't have to load the useless background image anymore and the container will expand with the width.

Also remove:

clear: both;
display:block;

Not sure why clear is here... what's it clearing? Also a div already displays as a block element by default, so scrap that.

Your CSS should now look like the following:

#container {
margin:0 auto;
padding-bottom:30px;
width:800px;
border-right:solid 4px #DFDFDF;
border-left:solid 4px #DFDFDF;
background-color:#F5F5F5;
}



Ok, then to do the footer. What I've done is replace your div#footer with the following:


<div id="footer">
<div id="left">&nbsp;</div>
<div id="middle">
<ul class="testbar">
<li><a class='altCss' href='index.php?css=Bog_Standard'>Bog Standard</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div id="right">&nbsp;</div>
</div>


The CSS is as follows:

#footer {
margin:0pt auto;
width:816px;
}
#footer #left {
background:url(images/footer_left.png) no-repeat left 0;
height:50px;
width:20px;
float:left;
}
#footer #middle {
height:46px;
width:776px;
border-bottom:solid 4px #DFDFDF;
background-color:#F5F5F5;
float:left;
}
#footer #right {
background:url(images/footer_right.png) no-repeat right 0;
height:50px;
width:20px;
float:left;
}


Also, add:

<div style="clear:both;"></div>

After div#pcontent to clear the floats from the heading classes.

Images I used are located here: http://www.clochlum.com/redesign/

ajax have nothing to do with that. Your footer must have 3 parts, left round corner, middle and right round corner, then the middle part can have any width you want.

regards
It was Ajax includes, so when I looked in the Source, the page content wasn't in the div.

Thanks lochlan, although it is a gentle gradient (which I will make 1 pixel tall).