中心凱蒂？在jsFiddle！迫使背景下

Question

http://jsfiddle.net/TurtleWolf/P7xKm/

center kitty? in jsFiddle?

所以我只想背景圖像不是HTML的其餘部分的下面。這是Evan在第二個鏈接中已經幫助我的後續...因此，圖像將重新調整大小到任何窗口，但現在它不作爲背景圖像... html5中的最佳做法是什麼對於這種情況？

Answer 1

更新辦法在這裏：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> 

那麼你一定要採取「容器」元素了公文流轉，這樣你就可以在圖層內容頂部：

.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，取決於您是否希望圖像垂直居中。

Answer 2

鑑於圖像的高度可能發生變化，當窗口大小發生變化時，您需要使用JavaScript重新計算位置。

拋出這個在JavaScript地區的jsfiddle並設置 'NOWRAP（身體）'：

$(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之外，您的交易<體之前添加此>標籤：

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