I'm trying to push my background content image and make it stick to bottom of my page. The image is NOT a footer since the image will be behind some of the content. But the image shouldn't get cut off at the top when there is little content and and should stick to the bottom when there is loads of content!
Nothing working quite yet. Anyone got any tips for me?
Here are two examples. One with content fitting the window and the other with a lot more content.
Here are two links;
http://www.andrewa.org/testing/mosaik-test/content-imagebottom-test.html
http://www.andrewa.org/testing/mosaik-test/content-imagebottom-test2.html
Thank you in advance folks!
I would put the image as a background to the body
using background-attachment: fixed;
and add:
html, body {
height: 100%;
}
So the total would be:
html, body {
height: 100%;
}
body {
background-image: url("images/bg_content.gif");
background-position: center bottom;
background-repeat: no-repeat;
background-attachment: fixed;
}