填充容器视差背​​景图片 [英] Parallax background image that fills container

问题描述

我使用stellar.js适用于背景图像的视差效果。周围的背景图像的容器的高度由JavaScript设定为窗口高度减去报头的高度。我有背景图片集的CSS覆盖，并希望它填充容器无论画面大小。这工作得很好，没有视差效果，但是一旦我申请的视差效果的定位变化，所以当容器是高大的形象不填充它。

I'm using stellar.js to apply a parallax effect to a background image. The height of the container around the background image is set by javascript to the window height minus the height of the header. I have the background image set to cover in css and want it to fill the container regardless of the screen size. This works fine with no parallax effect, but once I apply the parallax effect the positioning changes, so when the container is tall the image doesn't fill it.

我跟马克·达格利什，stellar.js的创造者，看他是否有任何想法，他说，背景图像必须比容器高为它填充它，这是pretty多结论我已经到了。所以我想知道如果有一种不同的方式，我可以做到这一点。没有人有任何想法？

I spoke to Mark Dalgleish, the creator of stellar.js to see if he had any ideas, and he said that the background image has to be taller than the container for it to fill it, which is pretty much the conclusion I had come to. So I'm wondering if there is a different way I can accomplish this. Does anyone have any ideas?

下面是我试图使其工作在网站上。如果通过从侧面拉出调整浏览器窗口，并重新加载页面，你会明白我的意思。有图像下面的差距。
http://sonomarinwebdesign.com/agnitio

Here's the site I'm trying to make it work on. If you resize the browser window by pulling it in from the side and reload the page you will see what I mean. There's a gap below the image. http://sonomarinwebdesign.com/agnitio

推荐答案

我终于用skrollr.js代替stellar.js，然后设置背景图片为固定背景附件解决了这个。脚本得到类似的效果，但scrollr.js与顶部在0偏移开始，因此它不会离开图像下方的间隙。

I finally solved this by using skrollr.js instead of stellar.js, and then setting the background image to "background-attachment: fixed" in the css. The scripts give a similar effect, but scrollr.js starts with the top offset at 0 so it doesn't leave a gap below the image.

这篇关于填充容器视差背​​景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！