センターキティ？ jsFiddleで！

Question

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

center kitty? in jsFiddle?

ダウン背景を強制だから、僕は背景画像は、HTMLの残りの部分を下回ることはないにしたいです。これは、エバンが2番目のリンクですでに私を助けてくれたことに続くものです...イメージはどのウィンドウにも再サイズされますが、今はバックグラウンドイメージとして機能しません... 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

画像の高さが変わる場合は、ウィンドウサイズが変更されたときに位置を再計算する必要があります。 jsfiddleとセットでのJavaScriptのエリアで

投げこれをパラメータ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>