html - 背景图片未完全填满 div

Question

我正在创建一个联系页面，并使用 div 来显示公司每个分支机构的地址和名称。我正在使用带有 Logo 背景图像的容器 div，并在带有地址的 div 顶部放置文本。问题是背景图像没有填满整个 div，即使我将 div 的宽度和高度设置为图像也是如此。

这是我的 HTML

<div class="divContactImg">
  <div class="branchHeader">Durban</div>
  <div class="branchText">82 Joe Slovo Street</div>
  <div class="branchText">Durban</div>
</div>

还有我的 CSS:

.divContactImg {
background-image: url('http://image.png');
width:225px;
height:80px;
border-left: thin solid #333;
border-top: thin solid #333;
border-right: thin solid maroon;
border-bottom: thin solid maroon;
float:left;
text-align:left;
margin-left: 5px;
border-radius:5px;
}                

.branchHeader {
font-size: 24px;
margin-left: 10px;
margin-top: 5px;
text-transform:uppercase;

}

.branchText {
font-size: 12px;
color:#cecece;
margin-left: 10px;
text-transform:uppercase;

我的图像大小为 225 x 80 像素，但是当它在那里渲染时，它会在高度和宽度上额外增加两个像素，看起来 div 的顶部和左侧有 2 个像素的差异，几乎如果应用了一些填充

Answer 1

使用:

background-size: cover;

让您的图像填充其父图像的背景。

fiddle 中的例子:

http://jsfiddle.net/CztS6/1/