ansaurus

Question

Pin image background to bottom of document in short and long documents

Answer 1

+1 A:

I think what you're trying to achieve is very similar to this layout, though in your case you would just stick your image into the footer element (or have it as a background on the footer). If you have a more complex page layout you may be able to adapt the code, or you could try this approach using javascript.

robertc 2009-08-11 13:12:56

Thanks for your answer

David Caunt 2009-08-11 15:01:37

Answer 2

A:

If you want to stick something to the bottom of the visible window, you can do so using CSS. This will work on render (and on window resize).

#specialBackground {
    background-image: url(bg.png);
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100px;
    z-index: -1;
    position: absolute;
    bottom: 0;
}

This will place the image where you want it - you will need to change the background-image and the height appropriate to your image. The z-index places the division behind other content, but it doesn't hurt to define the division earlier in your document too (you can define it anywhere and the position will be unchanged).

To keep the division at the bottom of the viewport when the visitor scrolls the page, you'll need to use JavaScript. Example below:

window.onscroll = function() {
document.getElementById("specialBackground").style.bottom = 
    (document.body.scrollTop * -1) + "px";
};

Hope this helps.

EDIT: I don't know if I made this clear - but you don't use your "wrapper" division to do this - you add another empty division, which get's placed behind the wrapper because of the CSS rules. So you'd have this on your page:

<div id="specialBackground">&nbsp;</div>
<div id="wrapper">
...

Sohnee 2009-08-11 13:25:09

Answer 3

+2 A:

This works for me in Firefox 3.5, IE8/7c, Chrome 2. Doesn't work in Opera 10b but I would expect it to work in the stable version (9.6).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;&lt;html dir="ltr" lang="en">
<head profile="http://www.w3.org/2005/10/profile"&gt;
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
 height: 100%;
 min-height: 100%;
}
.wrapper {
 background: #eaeaea url(http://sstatic.net/so/img/so/logo.png) scroll repeat-x bottom center;
 min-height: 100%;
}
</style>
 </head>

 <body>

  <div class="wrapper">
    <p style="height: 2000px;">test</p>
  </div>

 </body>
</html>

DisgruntledGoat 2009-08-11 14:28:23

Brilliant, I'd clearly just missed the right combination of min-heights and heights on elements. Your demo works fine, and IE6 can easily be supported with height on the .wrapper

David Caunt 2009-08-11 14:56:07

ansaurus

tags:

views:

answers:

Pin image background to bottom of document in short and long documents

related questions