How to stick background-image to the bottom of div

Hi,
I have #imagecontainer inside the Content and I am trying to apply background image to that #imagecontainer. I want the image to stick to the bottom of the ##imagecontainer and touch footer. The reason for this is that I have a big image and part of it will be applied footer and the other part to #imagecontainer. That way they will stock on top of each other and look as one image.
How can I accomplish that?
I have this code:
<div id=“container”>
<div id=“banner”>
<h1>Site name</h1>

&lt;/div&gt;
&lt;div id="nav"&gt;
	&lt;p&gt;
		Lorem ipsum dolor sit amet,
	&lt;/p&gt;
	&lt;p&gt;
		Lorem ipsum
	&lt;/p&gt;
	&lt;p&gt;
		Lorem ipsum
	&lt;/p&gt;

&lt;/div&gt;
&lt;div id="content"&gt;
	&lt;h2&gt;
		Page heading
	&lt;/h2&gt;
	&lt;p&gt;Ut wisi enim ad minim veniam, &lt;/p&gt;
        &lt;div id="imagecontainer"&gt;&lt;p&gt;Donec consequat cursus elit.&lt;/p&gt;&lt;/div&gt;

&lt;/div&gt;
&lt;div id="footer"&gt;
	Footer stuff here
&lt;/div&gt;

</div>
and style
body
{margin: 0; padding: 0;background-color: #ddd;
}

	#container
	{margin: 1em 5%; background-color: #FFF; border: 1px solid #333; position:relative;
	}
	
	#banner
	{background-color: #333; border-bottom: 1px solid #333;}
	#nav
	{float: left; width: 160px;	margin-left: 10px; padding-top: 1em;
	}
	#content
	{padding-top: 1em; margin: 0 2em 0 200px;}

	#footer
	{clear: both; background-color: #666; padding: 1em; text-align: right; border-top: 1px solid #333; height:35px;
	}
	#imagecontainer{background-image:url(images/footer.jpg) ; background-repeat:no-repeat; background-position:0pt 87px; bottom: 0; position:absolute;margin:0 0 55px 0;

confused:
Thanks for any suggestions. :

#imagecontainer {
  background:url("images/footer.jpg") no-repeat left bottom;
}

or, if you prefer the individual properties,

#imagecontainer {
  background-image:url("images/footer.jpg");
  background-repeat:no-repeat;
  background-position:left bottom; /* or 0&#37; 100% */
}

You’ll also need to set a height and width for the container if it doesn’t have any content.

Hi Beatta,

Just as AutisticCuckoo said, height and width are important to position:absolute. It also requires x & y coordinates, that is either right or left and top or bottom.

You have the position:relative in your main #container already so that allows you to position your #imagecontainer within the conatainer.

Here is a working example with your code, a lot of stuff can be broke down in shorthand but I left it as it was so you could see the structure. I have commented the css so it will explain more in detail.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Demo</title>
<meta name="generator" content="PSPad editor, www.pspad.com"/>
<style type="text/css">

/* ---------- ::Resets:: --------------------- */
body, address, blockquote, dl, ol, ul, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, pre {
margin:0;
padding:0;
}
body {
background: #ddd;
padding:20px 0;
}
#container {
margin: 1em 5%; 
background-color: #FFF; 
border: 1px solid #333; 
position:relative;
}

#banner {
background-color: #333; 
border-bottom: 1px solid #333;
}
#nav {
float: left; 
width: 160px; 
margin-left: 10px;
margin-bottom:50px; /*allow for #imagecontainer*/ 
padding-top: 1em;
}
#content {
padding-top: 1em; 
margin: 0 2em 0 200px;
margin-bottom:50px; /*allow for #imagecontainer*/
}

#footer {
clear: both; 
background-color: #666; 
padding:0; /*remove em padding to keep height constant for #imagecontainer position*/
text-align: right; 
border-top: 1px solid #333; 
height:45px;
line-height:45px; /*center text*/
}
#imagecontainer {
background-image: url("images/footer.jpg");
background-repeat:no-repeat;
background-position:left bottom;
width:100%;
height:50px; 
bottom: 0;
left:0;  
position:absolute; /*absolute positioning requires left or right & top or bottom with width & height*/
margin-bottom:45px; /*allow for footer*/
background:yellow; /*for testing only, remove when done*/
}
p {padding:10px}
</style>
</head>
<body>
<div id="container">
    <div id="banner">
    <h1>Site name</h1>
    </div>
        <div id="nav">
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        </div>
    <div id="content">
    <h2>Page heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean 
        vitae dolor quis diam sodales sodales. Quisque massa leo, sagittis sed, 
        rhoncus vitae, convallis nec, orci. Fusce lorem. Nullam ac dui. Mauris quis risus. 
        Mauris volutpat. Ut sollicitudin magna ac arcu. Aliquam velit. Donec commodo 
        tempus urna.</p>
        <div id="imagecontainer">
            <p>Donec consequat cursus elit.</p>
        </div>
    </div>
    <div id="footer">
    Footer stuff here
    </div>
</div>
</body>
</html>


I can’t set up the hight because that might change from page to page. The other thing is that this set up from RAY H breaks in IE6.
Maybe I should try something different?

The other thing is that this set up from RAY H breaks in IE6.
Maybe I should try something different?

Yes IE6 will require some special attention as it does in every layout, I didn’t invest the time in that. I was just showing you how position:absolute must be approached.

Yes you could try something different,

   		I can't set up the hight because that might change from page to page.

You could simply set two footers at the page bottom that expand with content.

Here is a double footer layout that I was talking about, with IE6 fixes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Double Footer Example</title>
<style type="text/css">
* {margin:0; padding:0;}
body {
    font: 100% trebuchet,tahoma,arial;
    background: white;
    margin:0;
    padding:20px 0;
}
#wrapper {
    width: 950px;
    margin: 0 auto;
    background: #00FF00; /*sidebar color*/ 
    border: 1px solid black;
}
#header {
    background-color: palegreen;
    height: 100px;
}
#main {
    margin-left:180px;/*this is the space for the left column */
}
#sidebar {
    float:left;
    margin-left:-180px;
    width: 180px;
    min-height:200px;
    background-color: #00FF00;
}
* html #sidebar {
    height:200px; /* ie6 treats height as min-height*/
    display:inline; /*for ie6*/
}
#right {
    background: skyblue;
    text-align:justify;
    min-height:300px;
}
* html #right {height:300px;}/* ie6 treats height as min-height*/

#topfooter {
    clear:both;
    background:yellow;
    min-height:40px;
}
#botfooter {
    background:palegreen;
    min-height:40px;
}
* html #topfooter, * html #botfooter {height:40px;}/* ie6 treats height as min-height*/
h4, p {
    padding:10px;
}

</style>
</head>
<body>
<div id="wrapper">
    <div id="header"><h4>Header Stuff Here</h4></div>
    <div id="main">
        <div id="sidebar">
            <h4>Sidebar</h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean 
            vitae dolor quis diam sodales sodales.</p>
        </div> <!-- end of #sidemenu -->
        
        <div id="right">
        <h4>This is div #right</h4>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean 
        vitae dolor quis diam sodales sodales. Quisque massa leo, sagittis sed, 
        rhoncus vitae, convallis nec, orci. Fusce lorem. Nullam ac dui. Mauris quis risus. 
        Mauris volutpat. Ut sollicitudin magna ac arcu. Aliquam velit. Donec commodo 
        tempus urna.</p>
        </div>     
    </div> <!-- end main -->
    <div id="topfooter"><p>This is #topfooter</p></div>
    <div id="botfooter"><p>This is #botfooter</p></div>    
</div> <!-- end wrapper -->
</body>
</html>