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

Използвам този плъгин: https://github.com/srobbin/jquery-backstretch за опънете фон по добър начин.

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

Чудя се дали има начин да променя плъгина така, че да не използва височината на прозореца или нещо подобно, а по-скоро да използва височината на документа? Гледах, но безуспешно. Знам, че това не е добра идея в случай, че съдържанието е дълго, но се прави само на една страница, която изобщо няма много съдържание. Наистина единствените проблеми са дали недвижимото пространство на браузъра (без да броим хрома) е по-малко от около 650px във височина.

Ето кода на приставката. Доста кратко и добре написано според това, което мога да кажа: 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, тъй като кодът използва свойството css3 background-size и трябва да зададете собствена ширина и височина на изображението в кода.

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
Имате зададени 2 позиции в img ?? Фиксирано и абсолютно... това не е добре! - 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