центр кошечка?в jsFiddle!заставляя фон вниз

Question

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

центр кошечка?в jsFiddle?

Так что я просто хочу, чтобы фоновое изображение не было ниже остальной части HTML.Это продолжение того, с чем Эван уже помог мне во второй ссылке ... Таким образом, изображение будет изменено на любое окно, но теперь оно не действует как фоновое изображение ... Каковы лучшие практики в 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>

Затем вы хотите взятьэлемент '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 в зависимости от того, хотите ли вы, чтобы изображение было центрировано вертикально или нет.

Answer 2

Учитывая, что высота изображения может изменяться, вам потребуется JavaScript для пересчета позиции при изменении размера окна.

Добавьте это в область JavaScript в jsfiddle и установите '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, добавьте это перед закрытием tag:

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