使背景图像始终为全高css？

Question

我有一个小的目标网页，我希望徽标和副标题以及下载链接设置在照片上。像这样：

<div id="photoHeader">
    <div id="logo">
        Logo Goes Here
    </div>
    <div id="sub">
        Make Awesome Mixes at Home, Fast!
    </div>
    <div id="downloadLink">
        <a href="#download">
            Download Now
        </a>
    </div>
</div>

我希望背景图片填充浏览器窗口的宽度并自动设置其高度，以便始终保持纵横比。我还要设置徽标，副标题和链接到大小百分比，以便它们缩小，但是现在我无法获得保持宽高比的背景。这是我试过的CSS：

#photoHeader{
background: url(http://www.examplesite.com/wp-content/uploads/2015/06/Mixer.jpg) no-repeat center center fixed;
background-size: 100% 100%
}

使用此CSS，后台保持纵横比但被浏览器顶部切断。我在这里缺少什么？

Answer 1

可能你想这样做（把它添加到你的CSS）：

body {   
     background: url(http://www.examplesite.com/wp-content/uploads/2015/06/Mixer.jpg); 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}