CODEWITHSUNDEEP
htmlcss
jcm
jcm

Reputation: 5659

How to make an image take up an entire div height and width?

I have the following header element defined:

<div class="header">
    <div class="row">
        <div class="col-md-8 col-xs-12">
            <h3 class="heading">Heading info here</h3>
            <p>...</p>
        </div>
        <div class="col-md-4 hidden-xs header-image"></div>
    </div>
</div>

with this style: 

.header-image {
    background-image: url("../img/email.jpg");
}

but the image isn't taking up the whole of the div, in fact, when I look at it in Chrome Inspector it has a height of 1px and a width of 380px

How do I make it take up the whole width and height of the div without padding or margins?

Upvotes: 2

Views: 17684

Answers (3)

voddy
voddy

Reputation: 1000

try setting the display property of image

.header-image {
background-image: url("../img/email.jpg");
display:table-cell;
}

for the dive

<div "style=display:table; text-align:center" class="col-md-4 hidden-xs header-image"></div>

check this answer

Upvotes: -1

St&#233;phane de Luca
St&#233;phane de Luca

Reputation: 13573

If you want the entire area to be covered while maintaining the original aspect ratio, you should use:

background-size: cover;

If you want the whole image fit in the div and you donc care about the image aspect ratio, use what @josh told you

background-size: 100% 100%;

But, it sounds like your div header does not bear the right height anyway. You have to make sure the height is what you want. Look at the rules in chrome inspector to find why it only has 1px. As a hack you might want to add height:200px; or whatever height fits you need in your .header class.

Upvotes: 1

Josh Beam
Josh Beam

Reputation: 19772

An option is to use the background-size property (however, keep in mind this is not supported in versions of IE less than 9):

background-size: 100% 100%;

This will fill the width and height of the div, but will only be visible if the div has its own width and height as well:

.header-image {
    width: /* your width */;
    height: /* your height */;
}

Upvotes: 4

Related Questions