CODEWITHSUNDEEP
cssbootstrap-4
Semiroux
Semiroux

Reputation: 1

How make image responsive when you have two images (one over the other)

With bootstrap, I try to have an image over an another image

html : 

<section id="test">
  <div class="row">
          <div class="imgbg"><img src="img/bg_pres.png" class="img-responsive"></div>
          <div class="imgpos"><img src="img/ico_presentation.png" class="img-responsive"></div>
</div>
</section>

css :

.imgbg
        {
  margin-top: 5%;
  position:absolute;
  background-repeat :repeat-x;
  width:98%;
  height:auto;
  background-image: url('img/bg_pres.png');
  z-index : 3;
      }


.imgpos
{
position:relative;
  z-index: 5;

}

When I resize my window, the pictures "ico_presentation.png" don't change and keep its original size.

Can someone explain me what I need to change ?

Thanks a lot

Upvotes: 0

Views: 973

Answers (2)

CandidSpace
CandidSpace

Reputation: 23

You can use img class="img-fluid" instead of img-responsive. I put my elements in a container-fluid and container. Using the Bootstrap framework.The div with id imgbg is empty. And the div with id imgpos also has img-fluid assigned to it make it change size on window resize. It works for me! If this helped, please mark my answer as correct.

.imgbg
    {
 background: url("img/tile.png");
 background-repeat: repeat-x;
 position:absolute;
 width:2000px;// size of the div width
 height:1000px;// size of the div height
 z-index: 3;
 }


 .imgpos
 {
 position:relative;
 z-index: 5;

 }




 <div class="container-fluid">
 <div class="container">
 <section>
      <div class="row">
        <div class="imgbg"></div>
      <div><img class="img-fluid imgpos" src="img/cinema.jpeg"></div>
 </div>
 </section>

 </div>
 </div>

Upvotes: 0

Mathis Brossier
Mathis Brossier

Reputation: 74

1) Be careful with indentation.

2) You have a div (imgbg) with a background-image AND the image in an img tag.

3) "ico_presentation.png" dont change size because you did not gave it a size in the first place. If your image is (lets say) 500x500px, it will be displayed like so on your webpage. I think you want your image to resize corresponding to the window size, so must give it dimensions in css using relative unit (%, vw, vh, ...)

Upvotes: 1

Related Questions