CODEWITHSUNDEEP
csstwitter-bootstrap
Gagan Naidu
Gagan Naidu

Reputation: 21

Bootstrap 3- How to align images above another image with responsive?

I am new to Bootstrap. Can someone help me to align and overlap images over another image with responsiveness in bootstrap. I tried as.

HTML:
<div class="container">
<div class="row">
<div class="col-lg-12">
<img src="images/book_bg.png" class="img-responsive"/>
<ul class="row">
<li class="col-lg-6"><img src="images/Desert.jpg" class="img-responsive"/></li>
<li class="col-lg-6"><img src="images/Hydrangeas.jpg" class="img-responsive"/> </li>
</ul>
<ul class="row">
<li class="col-lg-6"><img src="images/Jellyfish.jpg" class="img-responsive"/></li>
<li class="col-lg-6"><img src="images/Koala.jpg" class="img-responsive"/> </li>
</ul>
</div>
</div>
</div>

CSS: ul { width: 100%; } li { width: 49%; float: left; }

PROBLEM: Images not aligning to background as shown in fig.Help? https://drive.google.com/file/d/0Bwyjk1QbhhGGRVZxZkgxMk5RNlk/edit?usp=sharing download the image here

Upvotes: 1

Views: 1888

Answers (1)

Tasos
Tasos

Reputation: 7567

Include an id in this part of HTML, for example:

<img src="images/book_bg.png" class="img-responsive" id="background_image"/>

And then add a CSS for this id with an absolute position:

#background_image {position: absolute}

About the vertical align from the comment:

You can find many questions related to this. Here are a few examples:

Question 1 Question 2 Question 3

Upvotes: 1

Related Questions