使背景图像始终全高css？答案

【问题标题】：Make background image always full height css?使背景图像始终全高css？
【发布时间】：2015-06-26 23:18:57
【问题描述】：

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

<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，背景保持纵横比，但被浏览器顶部截断。我在这里错过了什么？

【问题讨论】：

通过被顶部截断，您可能指的是页面上的默认边距吗？尝试像 * { margin: 0; } 这样的重置

标签： css

【解决方案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;
}

【讨论】：