如何在html / css中获得完整图像作为标题的背景?

时间:2013-06-17 10:29:08

标签: html css

当我选择将图像作为我的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;
}

1 个答案:

答案 0 :(得分:4)

点击此处http://css-tricks.com/perfect-full-page-background-image/

DEMO 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;
}