Using bootstrap and layering images

HTML & CSS
1

I have a site which is bootstrap driven and the top row consists of 2 columns, each 50% wide.

When viewed in a mobile, these become 2 x 100% wide rows, with the right hand column sitting below the left hand one.

In the right hand column I have 3 images with transparent backgrounds layered on top of each other using position:absolute and z-index. This works well on desktops, but on the mobile device it causes problems as it merges into the row below.

I am guessing its the position:absolute that’s doing it but wondered if there was an alternative way of layering the images?

2

You should include some html & css in your post.

3

An excerpt of the code is shown below. I’ve left the css inline to keep it more concise for this post.

<div class="row yellowback" >
      <div class="col-md-6">
		This part contains some blurb            
      </div>
      <div class="col-md-6">
           <img style='position: absolute; z-index: 10;   max-width: 90%; margin-bottom: 7%' src='images/animals/giraffe.png' alt='giraffe' />
            <img style='position: absolute; z-index: 20;   max-width: 90%; margin-bottom: 7%;' src='images/clothes.png'  alt='' title='clothes' />
           <img style='position:absolute; z-index: 100;  max-width: 90%; margin-bottom: 7%;' src='images/copyright-with-text.png' alt='copyright' />         
       </div>   
  </div> 

<div class="row yellowback" >
     <div class="col-xs-12">
         This part contains a row horizontal images but the images above end up on top of these.
     </div>
</div>
4

Will this work?


<div class="row yellowback" >
      <div class="col-xs-12 col-md-6">
		This part contains some blurb            
      </div>
      <div class="col-xs-12 col-md-6">
           <img style='position: absolute; z-index: 10;   max-width: 90%; margin-bottom: 7%' src='images/animals/giraffe.png' alt='giraffe' />
            <img style='position: absolute; z-index: 20;   max-width: 90%; margin-bottom: 7%;' src='images/clothes.png'  alt='' title='clothes' />
           <img style='position:absolute; z-index: 100;  max-width: 90%; margin-bottom: 7%;' src='images/copyright-with-text.png' alt='copyright' />         
       </div>   
  </div> 

<div class="row yellowback" >
     <div class="col-xs-12">
         This part contains a row horizontal images but the images above end up on top of these.
     </div>
</div>
5

Thanks for your reply. Unfortunately, it doesn’t work.
I know it must be the position:absolute that’s the problem, but can’t seem to work out why.

6

Hlforr, please set up the code that you’ve provided on a standalone working page and try it on your PC and see if it demonstrates the problem. It doesn’t.

If you can post a link to the site, or post a working page… starts with <doctype, ends with </html>, contains HTML and CSS secitons… we should be able to help.

The box containing the images is probably {position:relative} and should have a height specified. Objects that are position:absolute are removed from the flow of the page. The text below them would underflow them if their parent did not have a height (or space allowed for them using some other method). Perhaps the height is being removed with the media query kicks in.

7

Hi, yes you are correct, the code works fine until I use it with bootstrap.
This is the full page I am working on…
http://loudonwebdesign.co.uk/babadoodle/girls-skirts.php?char=catM

The page allows the user to select a skirt, and will then go to another page to add a top etc.

The code works well with one image as it doesn’t need to be positioned absolutely, so I am thinking that the only solution might be to use the variables passed to such pages to construct an image using php, display it on the page, and then destroy it when the user moves to the next page.

8

Got it working finally. Decided the best solution was to layer the images then merge them using php. Because I then don’t need the position:absolute it works fine.
Thanks everyone for your replies.

9

Glad you found a solution. Thank you for explaining what you did to solve it.

Cheers.