底部固定图像，如附带的屏幕截图所示

Question

如下面的屏幕截图所示，我想放置一个底部固定图像，它应该出现在（不是）某些内容（徽标和中央描述文本）之后。此图像应符合屏幕宽度。

我想出了这两个错误的解决方案。首先，使用 CSS background-size 属性：

// 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>

其次，使用一些Javascript并识别窗口的大小调整并在图像标记上设置一些css属性：

// 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" />

这些解决方案有效，但我不希望图像覆盖（或作为背景）徽标和描述。你能救我吗？

Answer 1

这样的事可能是：http://jsfiddle.net/

我做了什么：

• 我首先使用粘性页脚：http://ryanfait.com/sticky-footer/
• 然后我为后台添加了一个额外的div（在内容包装器中，但这不是必需的）
• 我将背景div置于绝对位置，顶部等于其上方内容的高度（徽标和其他内容，您不希望背景背后）和底部等于页脚的高度。左右我设置为0以使其占据整个宽度。
• 我应用了您已经想到的background-size: contain（在我的示例中仍然需要添加前缀）

背景的CSS如下所示：

#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 */
}

通常情况下，我不是仅仅为造型添加空div的忠实粉丝，但我不会在这里看到其他解决方案。如果它没有得到应用（优雅降级和所有），我甚至不太喜欢使用javascript来破坏你的网站的东西，所以这可能是我要去的方式......