I am creating a contact page and am using div's to show the address and name of each branch for the business. I am using a container div with a background image of the logo and laying text on top of the div with the address. The problem is the background image is not filling the entire div, even when I set the width and height of the div to the image.
Here is my HTML
<div class="divContactImg">
<div class="branchHeader">Durban</div>
<div class="branchText">82 Joe Slovo Street</div>
<div class="branchText">Durban</div>
</div>
And my 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;
}
My image is of size 225 x 80 pixels however when it renders there it adds an extra two pixels to the height and width, and looks like there is a 2 pixel difference inside the top and left side of the div, almost as if there is some padding being applied
Use :
background-size: cover;
to make your image fill the background of its parent.
Example in a fiddle: