如何使背景图像全尺寸答案

【问题标题】：How to make a background image full size如何使背景图像全尺寸
【发布时间】：2018-09-24 14:13:47
【问题描述】：

我正在尝试制作全尺寸背景图像：这并不意味着它应该覆盖所有页面，我的意思是图像宽度应该是全窗口大小并且高度应该是自动的（图像应该重新缩放并如果需要可滚动）。这是我尝试过的：

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;
}

但是如果 body 为空，背景就会消失。由于我是 HTML 和 css 的新手，我非常感谢一些帮助。

提前致谢！

【问题讨论】：

供您参考：https://jsfiddle.net/ThinkingStiff/jUr9E/
这很容易通过标签实现，宽度为 100%。您在尝试时遇到任何技术问题？
是的，我已经通过 img 标签实现了这一点，但我希望其他元素位于顶部。如果它有权在所有其他元素上放置相对位置，我不同意。

标签： html css

【解决方案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/

【讨论】：

感谢您的尝试，但它仍然会剪切图像的下部。
你确定 body 之前的点需要在那里吗？
抱歉，写错了。
我想它现在正在工作（请参阅添加的工作示例）......我正确吗？
是的，这就行了。如果正文有足够的内容覆盖图像。

【解决方案2】：

试试这个（连同你的 CSS）：

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

【讨论】：

我把这个放在body css中吗？
它没有影响背景，但感谢您的尝试。

【解决方案3】：

您需要将高度 100% 设置为 .body 类以覆盖整个页面。并移除 center center 固定属性。

  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;
    }

【讨论】：

感谢您的尝试，但它仍然会剪切图像的下部。