當滾動視口時，背景圖像在底部或右側被切斷

我看到了很多類似的問題，但找不到修復程序。
打開this sample並調整瀏覽器大小使其高度更短
比主要div高度〜400像素。當向下滾動，附接至本體的背景圖像被切斷：當滾動視口時，背景圖像在底部或右側被切斷

的代碼：

html { height: 100%; color: white; } 
 
body { height:100%; padding: 0; margin: 0; background:url(bg.jpg) repeat-x; background-position: bottom; background-size: contain; } 
 
/*#pageWrap { \t background:url(bg.jpg) repeat-x;}*/ 
 
#page { height:100%; } 
 
#divHeader { width:100%; height:115px; } 
 
#divMain { width:600px; height:400px; border: solid 1px brown; }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <div id="pageWrap"> 
 
     <div id="page"> 
 
      <div id="divHeader">Header</div> 
 
      <div id="divMain">Main</div> 
 
\t \t \t <div id="divFooter"><p>All Rights Reserved. Blabla® 2015</p></div> 
 
     </div> 
 
\t </div> 
 
</body> 
 
</html>

我試圖背景圖像移動到pageWrap DIV作爲有人建議。
它解決了垂直滾動問題，但水平創建了一個類似的問題：
當窗口太窄而向左滾動時，圖像在右側被切斷。

任何真正的解決方案？

來源

2015-12-17 Gil

您已定義repeat-x值，則背景僅在X軸（水平方向）重複。

爲了解決這個問題，你有兩種不同的解決方案來實現兩種不同的目的。

您可以將repeat的值在X和Y軸上重複，但是這會產生問題，因爲您的背景是漸變，並且如果在Y軸上重複，則視覺效果會很差。

另一種解決方案（在我看來最好的解決方案）是定義背景涵蓋整個元素。這可以通過background-size: cover。

的變化將是：

body { 
    background:url(bg.jpg) repeat-x; 
    background-size: cover; 
}

告訴我，如果這能解決你的問題。

存在與background-attachment屬性的另一個解決方案。它可以定義爲fixed值，滾動不會移動背景。

body { 
    background:url(bg.jpg) repeat-x; 
    background-attachment: fixed; 
}

來源

2015-12-17 14:23:23

嘗試這些背景樣式：

background: url(bg.jpg); 
background-position: 100% 100%; 
background-size: cover;

來源

2015-12-17 14:31:05 Chris

由於重複梯度看起來並不那麼好，我猜你只是想這樣的背景下alwas覆蓋你的整個視口，而不是與它滾動？這將通過no-repeat和cover完成，如下所示：

body { 
    height:100%; 
    padding: 0; 
    margin: 0; 
    background:url(bg.jpg) no-repeat fixed; 
    background-position: bottom; 
    background-size: cover; 
}

來源

2015-12-17 14:41:57 Johannes

當滾動視口時，背景圖像在底部或右側被切斷

回答

相關問題