background content image needs to stick to bottom

Question

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!

Answer 1

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