CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrap
Ognyan M
Ognyan M

Reputation: 106

How to place an image over an image with bootstrap

Any idea how I can add an image that is bottom center over another image? I have the following code:

http://pastebin.com/LMjQp4Ni

This produces the following result -> https://i.sstatic.net/ozQck.jpg So how can I do a responsive image over image in this situation? I want the dog to be in the middle bottom part of the nature image?

Upvotes: 2

Views: 3977

Answers (4)

Mohd Asim Suhail
Mohd Asim Suhail

Reputation: 2292

Absolute positioning will help you in achieving this. 

   .under
    {
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
    }
    .over
    {
    position:absolute;
    left: calc(50% - 125px);
    bottom:0px;
    z-index:-1;
    width: 250px;
    height: auto;
    }

<div class="container-fluid bg-1 text-center">
    <img class="img-responsive under"             src="https://wallpaperbrowse.com/media/images/summer_mountains_nature_lake_river_grass_93164_2560x1080.jpg" alt="Nature">
    <img class="over img-circle img-2" src="http://i.imgur.com/gcTJ6nx.jpg" alt="Dog" >
</div>

Demo : https://jsfiddle.net/g2skfjbL/

Upvotes: 0

Sandeep Naruka
Sandeep Naruka

Reputation: 11

you can use one big image as background image of div, then you can add new image with in that div.

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53674

To place an image over an image, use absolute positioning on the top image.

.container-fluid {
  padding-top: 70px;
  padding-bottom: 70px;
  position: relative;
}

.bg-1 {
  background-color: #4CB5F5;
  color: white;
}

.img-2 {
  position: absolute;
  width: 250px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="container-fluid bg-1 text-center">
	<img class="img-responsive" 			src="https://wallpaperbrowse.com/media/images/summer_mountains_nature_lake_river_grass_93164_2560x1080.jpg" alt="Nature">
	<img class="img-responsive img-circle img-2" src="http://i.imgur.com/gcTJ6nx.jpg" alt="Dog" >
</div>

Upvotes: 2

Keith
Keith

Reputation: 4147

What you can do is add a margin (%) so that it is placed base on the size of the screen. I also took out your width (250px) and made that a % so it grows and reduces based on screen size.

https://jsfiddle.net/4gesrw5r/

.img-2 {
display: inline;
width: 20%;
height: 20%;
margin-top: -25%;
}

Upvotes: 1

Related Questions