html - 如何在 html/css 中获取完整图像作为标题的背景？

Question

当我选择一个图像作为我的 div 的背景时，我无法让它看起来很正常。我的页眉的宽度和高度是用 em 制作的。有人可以解释我如何在我的标题中获取图像作为背景，当标题如下：120em 宽度。5em 高度。所以我需要使一个正常的标题背景与我的标题大小相同。

.header{
 -webkit-background-size: cover;
  -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
background-image:url('images.jpg');
text-align: center;
width: 120em;
height:5em;
background-size:100%;
}

.left{
background-color:red;
float: left;
width: 20em;
height: 51em;
}

.middle{
background-color: green;
width:120em;
padding:0px;
margin:0px;
height:51em;
}

.footer{
height:4em;
width: 120em;
background-color: blue;
}

Answer 1

检查这里，http://css-tricks.com/perfect-full-page-background-image/

演示http://jsfiddle.net/yeyene/PtEnY/3/

#yourHeader{
  float:left;
  width:120em;
  height:5em; 
  background: url(images/bg.jpg); 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 2

.jumbo-background { 
  background: url(image/bg.jpg) no-repeat center/cover; 
}

我想我了解您要实现的目标，以上是我使用的，只需将其放在您想要背景图像的最高级别的 div 上，并且随着页面的缩放，它应该保持相对“在框架内”。您希望为此添加一点兼容性，但以上是一般要点。