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!

Chop

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

Fought

uh oh? i upvoted it but i cant accept the answer since it wasnt my question – Lemonade

np - it happens...people asking questions then disappearing – Lemonade

Answer 2

Apply the background to your wrapper and set the background-position to bottom as you have done. The trick is to set a minimum height on your wrapper that is the same height as your background-image. This will solve the issue of not enough content while still growing with the page when there is lots of content.

Bilk

Answer 3

I believe your problem is two fold. First, you have a set height for your #content-image div. Remove that height.

Secondly because your content within that div is floated, you need to clear the float on the #content-image div. something like: "overflow:hidden; clear:both"

Try that.

Untenable

Answer 4

A sticky footer and a sticky background in one. Take the height of your background image as your footer height and determine how much of the picture needs to be overlapped by your content. To let the sticky footer "disappear" use the same number in the main margin-bottom as you have for the footer height. This is a moderated design from original design of sticky footer from: http://www.webcreationz.nl/de-ultieme-sticky-footer-code (sorry site is in Dutch).

I just figured this out. I hope it will help someone.

HTML:

<div id="container">

  <div id="main">text of your website</div>

  <div id="spacer"></div>

</div>

<div id="footer"></div>

CSS:

html, body { 
    height: 100%; 
}


#container {
width: auto; /* with number center with margin: 0 auto;*/
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: -175px; /* height footer */
}

#main {
    height: auto;
    width: 618px;
    float: right;
    margin-top: 10px;
    padding: 20px;
    background-color: #FFF;
    border: 1px solid #E1E4EC;
    margin-bottom: -100px; /* overlap of 100 px into footer */

}

#spacer {
    display: block !important;
    height: 175px; /* height footer */
}

#footer {
    clear: both;
    height: 175px; /* height footer */
    width: auto; /* with number center with margin: 0 auto;*/
    background-image: url("images/plaatje jpg"; /* background picture */
    background-repeat: no-repeat;
    background-position: center bottom;
}

Aphaeresis