How to set an image on top of another image?

Question

Images should be responsive for all devices. I used

    <img src="images/enter/red20.png" class=" img-responsive" 
        style="max-width:15%;position: absolute; right: 30%;"/>
    <img src="images/enter/computer.png" class=" img-responsive" />

on first top image but when is change the size or browser top image moves at other place. see design in above link.

Possible duplicate of [How do I position one image on top of another in HTML?](http://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html) — Roy, May 19 '16 at 09:36
That image doesn't look very helpful to me, what do you desire exactly? Must the images move relative, independent, not at all? How do you want to position them over each other? — Randy, May 19 '16 at 09:36
i want first image should be on top right corner of second image. and responsive for all devices. — Sohaib Riaz, May 19 '16 at 09:38

score 6 · Accepted Answer · answered May 19 '16 at 10:12

The key is to use percentages in combination with max-width.

The big image, you give it a max-width: 100%, therefor it will never be bigger as it own size, but also won't it be bigger as it's parent.

Wrap that image in a parent div. This div becomes a display: inline-block, so I will be as width as it's content. You place this div relative.

Then we add the little image inside the div and place it absolute. It's position then will be relative to the parent (div) and not the body. Give it a max-width of 25% (for example) and give it a top and left/right position in %.

HTML:

<div class="wrapper">
  <img class="big-img" src="big.png" />
  <img class="small-img" src="big.png" />
</div>

CSS:

.wrapper{
  display: inline-block;
  position:relative;
}
.big-img{
  width: 100%;
  max-width: 100%;
  border: 1px solid blue;
}
.small-img{
  border: 1px solid red;
  position:absolute;
  right: 10%;
  top: 10%;
  width: 25%;
  max-width:25%;
}

DEMO

Make the result window smaller and you'll see the images resize.

alamnaryab · Answer 2 · 2016-05-19T10:02:54.357

0

try this

<div class="wrapper">
  <img class="big-img" src="https://i.stack.imgur.com/DATNq.png" />
  <img class="small-img" src="https://i.stack.imgur.com/DATNq.png" />
</div>

css make wrapper position-relative;

.wrapper{
  position-relative;
}
.big-img{
  width:300px;
}
.small-img{
  position:absolute;
  top:50px;
  left:172px;
  max-width:70px;
  border:2px solid red;
}

Updated fiddle

edited May 19 '16 at 10:02

answered May 19 '16 at 09:44

alamnaryab

1,480
3
19
31

this is not responsive. when i resize the window of browser first image moves to another place – Sohaib Riaz May 19 '16 at 09:49
@SohaibRiaz max-width:100%; put this in the .big-img – rafahell May 19 '16 at 09:54
for mobile left: 172px; will be best but for desktop left:172; will not enough to make it responsive. like i want to put these images in center of div. so if device changed image position will be changed also. i want these images at the center of all resolution – Sohaib Riaz May 19 '16 at 10:02

score 0 · Answer 3 · answered May 19 '16 at 10:09

Have you considered using an image editing software to combine the two images? This solves a lot of problems related to positioning. You can then scale the image in different sizes and then use those for different page layouts, e.g.

"imageName-original"
"imageName-1/2x"
"imageName-2x"
"imageName-4x

score 0 · Answer 4 · answered May 19 '16 at 10:19

0

You can put the first Image in background of a relative div if possible. And second as an absolute image in div. Thanks

answered May 19 '16 at 10:19

Rinku Makwana

1
2

How to set an image on top of another image?

4 Answers4