CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kathryn Crawford
Kathryn Crawford

Reputation: 611

Layer responsive images on top of each other with Bootstrap

I'm trying to get two images on top of each other, while also being centered both vertically and horizontally on screen. If I make them both positioned relatively, the first one is centered great, while the second one appears beneath the first.

#copy, #logo {
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: auto;
margin-right: auto; 
}

So I added a wrapper and positioned that relatively and positioned the images absolutely. Now they stack on one another, but I lost my centering. 

#wrapper {
position: relative;
top: 50%;
transform: tranlasteY(-50%);
margin-left: auto;
margin-right: auto;
}

#copy, #logo {
position: absolute;
}

Upvotes: 1

Views: 6806

Answers (2)

j08691
j08691

Reputation: 207901

You can omit the wrapper and just use absolute positioning on the children elements, setting the margin to auto and the top/right/bottom/left to 0:

#copy, #logo {
    opacity: 1;
    position: absolute;
    margin:auto;
    top:0;
    right:0;
    bottom:0;
    left:0;
}
<div id="wrapper">
    <img id="copy" class="img-responsive" src="http://fillmurray.com/600/600"></img>
    <img id="logo" class="img-responsive" src="http://fillmurray.com/500/500"></img>
</div>

Upvotes: 2

teefars
teefars

Reputation: 612

You got to make html, body, the #wrapper and all the parent elements for the images to occupy all the screen, with height:100%. Set the positioning of the images absolute based on #wrapper with position:relative on it. And voilá, set the XY positioning margin to 50% (as you did) and translate(-50%) (as you did).

body,html{
  padding:0;
  height:100%;
}

#wrapper {
  position: relative;
  height:100%;
}

#copy, #logo {
  opacity: 1;
  position: absolute;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}

Pen

Obs: Great images btw

Upvotes: 4

Related Questions