jquery - растянуть фоновое изображение, чтобы заполнить документ, а не окно?

Я использую этот плагин: https://github.com/srobbin/jquery-backstretch для хорошо растянуть фон.

Итак, проблема в том, что если содержимое документа достаточно длинное, чтобы вызвать полосу прокрутки, то при прокрутке изображение остается на том же месте (просто выглядит как неподвижный фон). Вы можете увидеть это в его демонстрации здесь: http://srobbin.com/jquery-plugins/jquery-backstretch/ (на этой странице используется плагин. Просто прокрутите и обратите внимание, что фон не двигается).

Мне интересно, есть ли способ изменить плагин, чтобы он не использовал высоту окна или что-то в этом роде, а использовал высоту документа? Я смотрел, но безрезультатно. Я знаю, что это не лучшая идея в случае длинного контента, но это делается только на одной странице, на которой вообще мало контента. На самом деле единственные проблемы возникают, если высота браузера (не считая хрома) меньше 650 пикселей.

Вот код плагина. Довольно коротко и хорошо написано из того, что я могу сказать: https://github.com/srobbin/jquery-backstretch/raw/master/jquery.backstretch.js


javascript image jquery background background-image
person Matthew    schedule 15.12.2010    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Когда-то у меня была такая же проблема, это было мое решение.

$(window).resize(bg);
function bg() {
    var imgWidth = 1088, 
        imgHeight = 858,
        imgRatio = imgWidth / imgHeight,
        bgWidth = $(document).width(),
        bgHeight = bgWidth / imgRatio;

        $('body').css({backgroundPosition: 'top center'});
        if ($(document).width() < imgWidth && $(document).height() < imgHeight && $(document).height() > bgHeight) {
            $('body').css({backgroundSize: 'auto 100%'});
        } else {
            $('body').css({backgroundSize: '100% auto'});
        }
}
bg();
$('body').css({backgroundRepeat: 'repeat-x'});
$('body').css({backgroundImage: 'url("images/bg-state/bg_static2.png")'});

Примечание. Он не растягивается в IE, поскольку в коде используется свойство background-size css3, и вам необходимо установить собственную ширину и высоту изображения в коде.

person Codler    schedule 20.12.2010

arrow_upward
0
arrow_downward

Другой подход с прокручиваемым содержимым и фиксированным фоном — просто использовать <iframe> или зафиксировать <img> на слое. Тогда вам не нужно будет зависеть от jQuery (который, как мне кажется, немного тяжеловат) для чего-то, что можно было бы сделать в браузере без него.

<body background="background.png">
    <iframe src="content.html" height="600"/>
</body>

Также нашел другой способ сделать это со слоями:

<img src="background.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index:-1;" />
<div style="position: static;z-index: 1; ">
    content
</div>

person Lam Chau    schedule 27.12.2010
comment
У вас в img выставлено 2 позиции?? Фиксированное и абсолютное... это нехорошо! - person Warface; 12.03.2012
comment
хороший улов (стиль), но технически последний побеждает, поэтому вы можете установить все свойство position в течение всего дня, но при рендеринге будет учитываться только последний;) - person Lam Chau; 13.03.2012

arrow_upward
-2
arrow_downward

Не обращая внимания на соотношение изображений, я считаю, что вы можете установить bgHeight на $("body").height().

person Alexander Wallin    schedule 16.12.2010