jQuery - 如何将背景图片拉伸以填满整个文档而不是窗口？

Question

jQuery - 如何将背景图片拉伸以填满整个文档而不是窗口？

javascriptjqueryimagebackgroundbackground-image

3

我正在使用这个插件：https://github.com/srobbin/jquery-backstretch来很好地拉伸背景图片。

问题是，如果文档的内容足够长以至于会出现滚动条，那么当你滚动时，图片仍然保持在原地（看起来就像是一个静止的背景）。你可以在他的演示中看到这一点：http://srobbin.com/jquery-plugins/jquery-backstretch/（这个页面使用了该插件。只需滚动并注意背景不会移动）。

我想知道是否有一种方法可以更改插件，使其不使用窗口高度或其他东西，而是使用文档高度？我已经搜索过了，但没有找到答案。我知道在内容很长的情况下这不是一个好主意，但它只在一个几乎没有任何内容的单页面上完成。实际上，唯一的问题是如果浏览器的可视区域（不包括chrome）高度小于约650px。

以下是插件代码。从我所看到的来看，非常简短且写得很好： https://github.com/srobbin/jquery-backstretch/raw/master/jquery.backstretch.js

- Matthew

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Codler · Answer 1

我曾经遇到过同样的问题，这是我的解决方案。

$(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")'});

注意：由于代码使用了css3属性background-size，它在IE上不会拉伸，您需要在代码中设置图像的宽度和高度。

- Lam Chau · Answer 2

另一种具有可滚动内容和固定背景的方法是仅使用<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>

- Alexander Wallin · Answer 3

不考虑图像比例，我认为你可以将bgHeight设置为$("body").height()。