固定背景不拉伸到整个窗口答案

【问题标题】：Fixed background not stretching to full window固定背景不拉伸到整个窗口
【发布时间】：2014-02-27 03:25:04
【问题描述】：

我的网站上有一个固定的背景，应该根据浏览器窗口的大小进行拉伸。然而，由于某种原因，在到达页脚之前，底部有一条白色的小条。

也许我在 CSS 中的处理方式存在一些问题？

这是我的html：

<div class="clear" id='content'>    
    <br> 
    <br>
    <br>
        <?php 
            $section = $_GET["section"];
            if ($section == 'changePassword'){
                include "changePassword.php";
            }elseif ($section == "contactinfo"){
                include "contactInfo.php";
            }elseif ($section == "publicinfo"){
                include "publicInfo.php";
            }elseif ($section == "import"){
                include "import.php";
            }elseif ($section == "users"){
                include "viewUsers.php";
            }elseif ($section == "sales"){
                include "sales.php";
            }elseif ($section == "statements"){
                include "./statements.php";
            }elseif ($section == "books"){
                include "viewBooks.php";
            }elseif ($section == "specialists"){
                include "booking.php";
            }elseif ($section == "viewUser"){
                include "viewUser.php";
            }elseif ($section == "logAsUser"){
                include "loginAsUser.php";
            }else{
                include "account.php";
            }
            //specialists
        ?>

<script type="text/javascript" src="main.js"></script>
</div>

还有css：

.clear {
background: url('../assets/19.jpg') no-repeat fixed ;
background-size:100% 100%;
position: initial;
background-repeat: repeat-x;
background-repeat: repeat-y;

}

谢谢！

【问题讨论】：

请添加一个 js-fiddle。

标签： html css image background

【解决方案1】：

您的 div 不会拉伸等于浏览器高度以使 background-size 属性工作。添加这个 CSS：

html, body, .clear {
  height:100%;
}

您必须同时使用 html 和 body 选择器指定高度。而 .clear div 必须是 BODY 的直接子代。否则解决方案将不起作用。您不必指定width:100%;，因为默认块元素覆盖宽度。

小提琴：http://jsfiddle.net/DGFnT/

【讨论】：

太棒了！这解决了在将不同的标记应用于固定页面与滚动页面之后的问题。谢谢！！

【解决方案2】：

您的.clear css 正在添加背景大小，但您没有设置高度和宽度。

尝试将width:100% 和height:100% 添加到您的.clear css

【讨论】：

当我添加这些时，它会将空间更改为页脚下方，而不是页脚上方。是否也有一个简单的解决方法？

【解决方案3】：

尝试使用background-size: cover 而不是background-size:100% 100%。

【讨论】：

将此与 mozilla 和 webkit 实现一起添加。谢谢！！

【解决方案4】：

我不知道为什么，但是您没有为 .clear 分配 no repeat 但然后告诉它 repeat-x 和 repeat-y... 无论如何，如果您希望背景覆盖整个视口确保 .clear 容器具有 height: 100%，然后您可以像这样使用 background-size: cover：

.clear{
    height: 100%;
    background: url('../assets/19.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

希望这会有所帮助:)

【讨论】：

感谢您的提示！这无疑帮助我清理了我的 CSS，尽管它没有解决问题。