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

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

3 голосов
/ 15 декабря 2010

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

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

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

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

Ответы [ 3 ]

0 голосов
/ 20 декабря 2010

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

$(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, и вам нужно установить свой собственныйширина и высота изображения в коде.

0 голосов
/ 27 декабря 2010

Другой подход с прокручиваемым содержимым и фиксированным фоном - просто использовать <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>

0 голосов
/ 16 декабря 2010

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

...