Question

我需要容器div中的背景图片来延长我网站的整个长度。

然而，目前它在中途被切断了。宽度是完美的，我不能重复图像，因为图像包含一些内容。

我也试过background-size:100%",height:100%，但它没有帮助。

    <body>
<div id="container">
<div id="logo">
</div>
<div id="navigation">

    <ul id="nav">

        <li><a href="/">Home</a></li>
        <li><a href="#">About</a></li>
        <li>
            <a href="#">Recipes</a>
        </li>
        <li><a href="#">The Author</a></li>
<li><a href="#">Contact Us</a></li>
    </ul>

</div>


<div id="spoons">
</div>
<div id="shbox">
<div id="main">
<div id="center">


<div id="gallery">


</div>
</div>
<div style="clear:both"></div>

<div id ="aboutbox" class="shadow" >
<p style="padding: 20px; text-align:center;">Lorem ipsum </p>
</div>
</div>
</div>
<div id="footer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">The Author</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="clear">
</div>
</div>

</body>

CSS

#container
{
    margin: 0 auto;


    background-image:url('backg.jpg');
    background-repeat:no-repeat;
       position:relative; z-index:1;
        width:990px; 

}
#logo
{
height:150px;
}
#navigation
{
    height:40px;
}
#main{
        padding: 50px;

}
#nav{

            list-style:none;
            margin:0;
            padding:0;
            text-align:center;
            z-index:10;

        }

#gallery
{
    width:860px;
    height:400px;
    background-color:#FFF;
    float:left;
    border-radius: 5px;
    padding:10px;

}
#aboutbox
{
    margin-top:30px;
    width:880px;
    background-color:#FFF;' 
    border-radius: 5px;
    clear:both;
}
#clear
{
    clear:both;
}
.shadow
{
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
     box-shadow:         3px 3px 5px 6px #ccc;
}

        #fronttext
        {

             color:white;
            text-align:center;

        }

        #footer li{
            position:relative;
            display:inline;
            margin:0;
            padding:0;
        }

        #footer a{
            display:inline-block;
            padding:10px;
            color:white;
        }

Answer 1

使用background-size:cover，如下所示：

#your-container-div{ 
    background: url(your_image.jpg) no-repeat center center fixed; 
    background-size: cover;
}

HTML背景图片不会覆盖整个高度

1 个答案: