CODEWITHSUNDEEP
htmlcssbackground-imagefill
Mikey
Mikey

Reputation: 133

Background image not completely filling div

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

Upvotes: 3

Views: 11958

Answers (2)

Alex Wilson
Alex Wilson

Reputation: 2419

you need add background-size:cover; or contain

.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;
background-size: cover; /**add this**/
}

contain - Scales the image proportionally so that the picture is entirely fit into the block.

cover - Scales the image proportionally so that its width or height equal to the width or height of the block.

Upvotes: 2

agconti
agconti

Reputation: 18093

Use :

background-size: cover;

to make your image fill the background of its parent.

Example in a fiddle:

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

Upvotes: 7

Related Questions