One of my challenges with using Bootstrap is trying to place an image on top of another image.
Here's the HTML code I currently have:
<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>
This is what my CSS looks like:
.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;
}
Even when I resize my window, the image "ico_presentation.png" doesn't change and maintains its original size. Can someone provide guidance on what adjustments need to be made?
Any help would be greatly appreciated. Thank you!