Bottom fixed image, as shown in the attached screenshot

Question

As shown in the screenshot below, I'd like to put a bottom fixed image, that should appear after (not over) some contents (a logo and a central description text). This image should fit the width of the screen.

I came up with these 2 wrong solutions. First, using CSS background-size property:

// CSS
.bg {
    width: 600px;
    height: 300px;
    position: fixed;
    bottom: 0;
    left: 0%;
    background: url('image.jpg') no-repeat center fixed;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

// HTML part
<div class="bg"></div>

Second, using a bit of Javascript and recognizing the window's resize and setting some css properties on an image tag:

// JS
        // some magick here...
        if ((win_w / win_h) < ($bg.width() / $bg.height())) {
          $bg.css({height: '100%', width: 'auto'});
        } else {
          $bg.css({width: '100%', height: 'auto'});
        }

// HTML Part (I'm using a shim)
<img class="bg" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" style="position: relative; left: 0; bottom: 0" />

These solutions work, but I don't want the image covering (or be a background of) the logo and the description. Can you help me?

Answer 1

Something like this perhaps: http://jsfiddle.net/

What I did:

• I first applied a sticky footer: http://ryanfait.com/sticky-footer/
• I then added an extra div for the background (inside the content wrapper, but that should not be necessary)
• I positioned the background div absolute, with a top equal to the height of the content above it (logo and other content you do not want the background behind) and a bottom equal to the height of the footer. Left and right I set to 0 to make it take up the full width.
• I applied the background-size: contain you already figured out (still needs prefixing in my example)

The css for the background looks like this:

#background {
    background: url(...) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 30px; /* height of content above */
    bottom: 50px; /* height of content beneath */
    left: 0;
    right: 0;
    z-index: -1; /* to position it under the content, but as no content is covering it, you could leave it out as well */
}

Normally I am not a big fan of adding empty div's for styling only, but I don't realy see an other solution here. I am even less of a fan of using javascript for something that may mess up your site if it does not get applied (graceful degrade and all), so this is probably the way I would go...