All geek questions in one place

Jquery - stretch background image to fill document, not window?

I use this plugin: https://github.com/srobbin/jquery-backstretch to stretch the background in a good way.

So, the problem is that if the content of the document is long enough to cause a scroll bar, then when scrolling the image remains in one place (it just looks like a fixed background). You can see this in your demo here: http://srobbin.com/jquery-plugins/jquery-backstretch/ (the plugin is used on this page. Just scroll and note that the background is not moving).

I am wondering if there is a way to change the plugin so as not to use the window height or something else, but rather use the height of the document? I looked, but to no avail. I know that this is not a great idea if the content is long, but it is made on only one page, on which there is not much content. In fact, the only problems are: if the property in the browser (not counting chrome) is less than about 650 pixels in height.

Here is the plugin code. Pretty short and well written from what I can say: https://github.com/srobbin/jquery-backstretch/raw/master/jquery.backstretch.js

+3
source share
3 answers

, .

$(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, .

0

<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

, , bgHeight $("body").height().

-2

Source: https://habr.com/ru/post/1780501/

More articles:


All Articles