如何使背景图片全尺寸

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')";