為“滾動”頁面設置背景大小（圖像）

Question

所以我遇到了麻煩，如果我有一個“長”的網頁（你可以讓你的窗口盡可能大，但仍然需要滾動）圖像不能正確“表現”。

我認為將background-size屬性設置為cover可以做到這一點，但是圖像不夠大（必須非常大），一旦我向下滾動頁面，我就會得到空白。 是否有一個屬性可以將背景的高度設置為 100%，然后正確縮放圖像，使其具有與原始高度成比例的正確寬度？

我現在的解決方案是具有圖像“緩和”的背景顏色，只是為了使它看起來平滑。

Answer 1

嘗試使用

 html,body { 
  background: url(yourImg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

或者如果圖像不夠大，也可以使用背景色`

background: #6DB3F2 url('yourImg.jpg');

Answer 2

嘗試使用background-size: 100% 100%; 財產。 但這會拉伸你的形象。

如果你想為整個網頁添加背景，那么你可以添加background-image:(''); 對身體的財產。

例如

body{
  background-image:url('http://backgrounds-free.com/highresolution/l_086.png');
  background-repeat:none;
  background-size: 100% 100%;
}