Question

我的div的背景图片有问题。基本上，我的背景图像宽度为1500px，高度为745px 当页面加载时，我想看到图像的整个高度（因此图像适合div的高度）。我希望这种行为是这样的：http://www.wearegather.org/

我的html文件：

<body>
    <div id="main_wrapper">
        <header>
            <nav>
              <ul>
                <li>menu1</li>
                <li>menu2</li>
                <li>menu3</li>
              </ul>
            </nav>
        </header>

        <div id="home">
        </div>

        <footer>
        </footer>
   </div>
</body>

css：

body
{
margin:0 auto 0px;
width: 1500px;
font-size: 14px;
color: #B1B3B4;
width: 100%;
}

header
{
margin: 0px auto 0px;
width: 960px;
height:110px;
border: 1px solid blue;
}

nav
{
width:100%;
text-align: center;
font-size: 10px;
letter-spacing: 1px;
}

nav ul
{
list-style-type: none;
padding:0;
}

nav li
{
display: inline-block;
margin-right: 15px;
}

#home {
 border: 1px solid green;
 margin-top:50px;
 background: url(http://www.wearegather.org/wp-content/uploads/2013/03/armscycles11.jpg) no-repeat fixed;

 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 }

但是当页面加载时，无法在整个高度上看到图像（底部不会出现）。

我试图添加一些jquery的东西，但它没有按预期工作。这可以在没有javascript的情况下实现吗？

有什么想法吗？

更新

我添加了一个jsfiddle：http://jsfiddle.net/5RuqP/8/

Answer 1

以下CSS应该可以完成您的任务。只需应用具有背景的div的样式：

background-image: url('../images/home.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
background-size:100% 100%;

您可以使用背景大小的样式，通过添加更高的百分位数来进行额外的拉伸。

页面加载时无法看到整个背景高度

1 个答案: