How to make the background image stick to the bottom of browser

I would like to have the footer image of my website stick to the bottom of the browser when the page content is short. Footer Image should stick to bottom of browser

The CSS code I have for that image is:

#site-container {width:100%; background:url(.../site-bg-foot.jpg) no-repeat left bottom;}

and it works perfectly for the pages where the content is longer.

I have tried using code from some tutorials out there but I have not been able to get the results I want. Is there a property I can add to that line of code to make the image stay at the bottom?

Thank you

Solution

Try:

position: fixed;
bottom: 0;

For the footer in your CSS

I'd also recommend you read this article in case the above isnt quite your flavour, broadly speaking:

HTML

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</body>

CSS

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
    background:#5ee;
}
#content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}