如何使背景圖片全尺寸

Question

我正在嘗試使背景圖像變為全尺寸：這並不意味着它應該覆蓋所有頁面，我的意思是圖像寬度應為全窗口尺寸，高度應為自動（圖像應重新縮放並在需要時可滾動） ）。 這是我嘗試過的：

body{
    width: 100%;
    height: 100%;
    background: url("../Images/BG_main.png")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

但是它只覆蓋了整個窗口和圖像下部的切口，我也嘗試過這樣：

body{
    width: 100%;
    height: auto;
    background: url("../Images/BG_main.png")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

但是如果主體為空，則背景消失。 因為我是HTML和CSS的新手，所以我非常感謝您的幫助。

提前致謝！

Answer 1

您也應該將HTML的高度設置為100％，如下所示：

 body, html {height: 100%;} body { background: red url("http://i.stack.imgur.com/jGlzr.png") no-repeat center center fixed; background-size: cover; } 

如果看不到問題所在，請右鍵單擊並選擇“檢查元素”。 然后嘗試找到HTML和BODY元素。 查找它們的高度，然后查看它們是否等於窗口高度。

https://jsfiddle.net/n6ef81qj/

Answer 2

您需要將.body類的高度設置為100％才能覆蓋整個頁面。 並刪除中心中心固定屬性。

  body{
        width: 100%;
        height: 100%;
        background: url("../Images/BG_main.png")no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

Answer 3

試試這個（連同你的CSS）：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";