CODEWITHSUNDEEP
htmlcss
BoJack Horseman
BoJack Horseman

Reputation: 4450

make image width responsive to parent div

This is my current html (it is actually jade) set up:

.format-properly
    .guide-bg-warrior.img-responsive

Which could be translated into:

<div class="format-properly">
    <div class="guide-bg-warrior img-responsive>
    </div>
</div>

The img-responsive class is from bootstrap and this is the other part of my css:

.format-properly {
    width: 70%;
    margin: 0 auto;
    background-color: white;
    border-radius: .0em;
}

.guide-bg-warrior{
    background-image:url('images/hero_images/warriorbg.png');
}

So the image is getting loaded but it is not getting scaled to the format-properly divs width. Do you guys have any suggestions on why this could be the case?

Upvotes: 1

Views: 3009

Answers (3)

Himanshu Vaghela
Himanshu Vaghela

Reputation: 1119

.guide-bg-warrior{
background-image:url('images/hero_images/warriorbg.png');
background-size:100% auto;

}

or you want to cover all div then use

.guide-bg-warrior{
    background-image:url('images/hero_images/warriorbg.png');
    background-size:cover;
}

Upvotes: 2

Nenad Vracar
Nenad Vracar

Reputation: 122115

If you want to use img-responsive class it must be on img element like this https://jsfiddle.net/2Lzo9vfc/171/

HTML

<div class="format-properly">
   <div class="guide-bg-warrior">
      <img src="http://placehold.it/1000x500" alt="" class="img-responsive">
   </div>
</div>

CSS

.format-properly {
    width: 70%;
    margin: 0 auto;
    background-color: white;
    border-radius: .0em;
}

Upvotes: 1

KCarnaille
KCarnaille

Reputation: 1057

You can try to add

.guide-bg-warrior{
    background-image:url('images/hero_images/warriorbg.png');
    background-size: 100% auto;
}

Or, if you really want your image to cover all the div:

background-size: cover;

Upvotes: 3

Related Questions