填充容器的视差背景图像

我正在使用stellar.js将视差效果应用于背景图像。 背景图像周围的容器高度由javascript设置为窗口高度减去标题的高度。 我将背景图像设置为覆盖在css中，并希望它填充容器而不管屏幕大小。 这没有视差效果，但是一旦我应用了视差效果，定位就会改变，所以当容器很高时，图像不会填满它。

我和Stellar.js的创建者Mark Dalgleish谈过，看看他是否有任何想法，他说背景图像必须高于容器才能填充它，这几乎就是我得出的结论。 。 所以我想知道是否有不同的方法可以实现这一目标。 有没有人有任何想法？

这是我试图让它工作的网站。 如果您通过从侧面拉入浏览器窗口并重新加载页面来调整其大小，您将看到我的意思。 图像下方有一个间隙。 http://sonomarinwebdesign.com/agnitio

Answer 1

我不太确定这是否可行，但尝试的是添加在页面resize时运行的javascript：

$(function() { $(window).resize(function() { // replace "100" with whatever makes it the best height: var newHeight = ($(window).height() - 100); var pictureHeight = 823; if (newHeight > pictureHeight) newHeight = pictureHeight; $(".an-yee-tsee-o.parallax.panel-pane").height(newHeight + "px"); }); }); 

这里的要点是，您需要在调整窗口大小时调整视差背景面板的大小。 即使这不太正确，希望它能让你走上正轨。 祝你好运！

注意 – 我试图修复网站在“短”屏幕上加载时的外观，然后调整浏览器的大小。 对于你没有填充背景的问题，你可以在一个工具中缩放背景图像，例如gimp用于更大的屏幕（或者从更大的图像开始）。

编辑 – 添加代码以确保div永远不会比图片大。 您也可以在加载时运行相同的代码。 它可能看起来不像最初的预期，但它至少应该起作用。

Answer 2

我终于通过使用skrollr.js而不是stellar.js解决了这个问题，然后在css中将背景图像设置为“background-attachment：fixed”。 脚本给出了类似的效果，但scrollr.js从顶部偏移量开始为0，因此它不会在图像下方留下间隙。