Question

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

也许我在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;

}

谢谢！

Answer 1

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

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

Answer 2

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

Answer 3

我不确定为什么，但是你没有重复 .clear 但是告诉它重复-x和重复-y ...无论如何你想要背景覆盖整个视口确保 .clear 容器的高度：100％，然后您可以使用 background-size：cover ，如下所示：< / p>

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

希望这会有所帮助：）

Answer 4

你的div不会等于浏览器高度，以使background-size属性工作。添加 CSS ：

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

您必须同时指定html和body选择器的高度。 .clear div必须是BODY的直接子女。否则解决方案将无效。您不必指定width:100%;，因为默认块元素包含宽度。

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

固定背景未拉伸至完整窗口

4 个答案: