Hello, I'm currently working on a contact page where I want to display the name and address of each branch using div elements. My approach involves a container div with a background image featuring the business logo, while text is placed on top to show the address. However, I've encountered an issue where the background image doesn't completely fill the entire div, even when setting the width and height accordingly.
Below 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 here's 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 set to be 225 x 80 pixels but upon rendering, it seems to add an extra two pixels to both the height and width. Additionally, there appears to be a 2 pixel variation in padding within the top and left sides of the div, giving the impression that some mystery padding is being applied.