1

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

Gagan Naidu
  • 21
  • 7
  • U can try offsets to position like `col-lg-offset-*` – Arun Feb 13 '14 at 12:29
  • images/book_bg.png should be background(via CSS), or you should use absolute positioning – Surjith S M Feb 13 '14 at 13:13
  • Hi, Thanks for your reply. I changed css as Position:absolute and its working fine. And also using col-offset i am able to move the inner images left-right and vice versa. But, to align it top/bottom whether any property available or i have to simply use css properties like (margin-top,margin-bottom, padding)? Can someone tell me about aligning images top and bottom. – Gagan Naidu Feb 17 '14 at 04:05

1 Answers1

1

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

Community
  • 1
  • 1
Tasos
  • 7,325
  • 18
  • 83
  • 176
  • Hi, Thanks for your reply. I changed css as Position:absolute and its working fine. And also using col-offset i am able to move the inner images left-right and vice versa. But, to align it top/bottom whether any property available or i have to simply use css properties like (margin-top,margin-bottom, padding)? Can someone tell me about aligning images top and bottom. – Gagan Naidu Feb 17 '14 at 04:05
  • @GaganNaidu I have updated my answer with several links about vertical alignment. – Tasos Feb 17 '14 at 08:07