jquery - 彈出背景圖像來填充文檔而不是窗口？

我使用這個插件：https://github.com/srobbin/jquery-backstretch以良好的方式拉伸背景。jquery - 彈出背景圖像來填充文檔而不是窗口？

所以，問題是，如果該文件的內容是足夠長，以使滾動條，然後滾動時，圖像停留在同一個地方（只是看起來像一個固定的背景）。你可以在他的演示中看到它：http://srobbin.com/jquery-plugins/jquery-backstretch/（這個頁面使用插件，只需滾動並注意背景不會移動）。

我想知道是否有辦法改變插件不使用窗口高度或東西，而是使用文檔高度？我看過，但無濟於事。我知道在內容很長的情況下這不是一個好主意，但是它只在一個根本沒有太多內容的頁面上完成。真正唯一的問題是，如果瀏覽器的房地產（不包括鉻）的高度小於650px左右。

這是插件代碼。很短，從我可以告訴寫得好： https://github.com/srobbin/jquery-backstretch/raw/master/jquery.backstretch.js

來源

2010-12-15 Matthew

-2

無需支付對於圖像比例，我相信你可以設置bgHeight到$("body").height()。

來源

2010-12-16 13:31:23

我曾經有過同樣的問題，這是我的解決方案。

$(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屬性背景大小，你需要設置自己的寬度和代碼圖像的高度。

來源

2010-12-20 14:39:06 Codler

另一種使用可滾動內容和固定背景的方法是隻使用或在一個圖層上固定<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>

來源

2010-12-27 12:40:49

您已在IMG設置2個位置？固定和絕對......這不好！ – Warface 2012-03-12 18:21:31

好抓（風格明智），但在技術上最後一勝，因此您可以設置所有的'position'財產整天但在渲染只有最後一個會算;） – 2012-03-12 20:09:22

jquery - 彈出背景圖像來填充文檔而不是窗口？

回答

相關問題