填充容器的視差背景圖像

Question

我正在使用stellar.js將視差效果應用於背景圖像。 javascript將背景圖片周圍容器的高度設置為窗口高度減去標題高度。 我將背景圖像設置為覆蓋CSS，並且無論屏幕大小如何，都希望它填充容器。 這在沒有視差效果的情況下可以正常工作，但是一旦我應用了視差效果，位置就會發生變化，因此當容器很高時，圖像將無法填充它。

我與stellar.js的創建者Mark Dalgleish進行了交談，以了解他是否有任何想法，他說背景圖片必須比容器要高才能填充它，這幾乎是我得出的結論。 所以我想知道是否有其他方法可以完成此任務。 有人有什么想法嗎？

這是我正在嘗試使其正常運行的網站。 如果您通過從側面拉入瀏覽器窗口來調整其大小並重新加載頁面，您將會明白我的意思。 圖像下方有一個縫隙。 http://sonomarinwebdesign.com/agnitio

Answer 1

我不太確定這是否可行，但是可以嘗試的方法是添加在頁面調整大小時運行的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，因此在圖像下方不留空隙。