Question

所以我只想让背景图像不低于html的其余部分。这是Evan已经在第二个链接中帮助我的一个跟进...所以图像将重新调整到任何窗口大小，但现在它不是作为背景图像... html5中的最佳实践是什么对于这种情况？

Answer 1

鉴于图像的高度可能会发生变化，当窗口大小发生变化时，您需要使用JavaScript重新计算位置。

将此内容放入jsfiddle的JavaScript区域并设置'nowrap（body）'：

$(function(){
    $('.bg_image').centerVertically();
    $(window).resize(function(){
        $('.bg_image').centerVertically();
    });
});

$.fn.centerVertically = function() {
    $(this).css('margin-top', $(window).height()/2 - $(this).height()/2);
};

请参阅：http://jsfiddle.net/irama/P7xKm/22/

或者，对于jsfiddle的外部，在结束之前添加它＆lt; body＆gt;标记：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script>

    $(function(){
        $('.bg_image').centerVertically();
        $(window).resize(function(){
            $('.bg_image').centerVertically();
        });
    });

    $.fn.centerVertically = function() {
        $(this).css('margin-top', $(window).height()/2 - $(this).height()/2);
    };

</script>

Answer 2

此处更新了方法：http://jsfiddle.net/irama/P7xKm/24/

打破它......

您想要添加内容层：

<div id="content">
    <p>Hello kitty!</p>
</div>
<div id="container">
   <img src="http://placekitten.com/g/200/300" class="bg_image" />   
</div>

然后你想从文档流中取出'container'元素，这样你就可以将内容分层了：

.bg_image {
    width: 100%;
}

#container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

#content {
    position: relative;
    z-index: 2;
    background-color: #fff;
}

然后，您可以根据您是否希望图像垂直居中来取走或离开JavaScript。

中心小猫？在jsFiddle中！强迫背景下来

2 个答案: