CODEWITHSUNDEEP
twitter-bootstrapcss
Sohaib Riaz
Sohaib Riaz

Reputation: 21

How to set an image on top of another image?

enter image description here

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.

Upvotes: 2

Views: 9173

Answers (4)

Rinku Makwana
Rinku Makwana

Reputation: 1

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

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

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.

Upvotes: 6

Barzev
Barzev

Reputation: 402

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.

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

Upvotes: 0

alamnaryab
alamnaryab

Reputation: 1484

try this

<div class="wrapper">
  <img class="big-img" src="https://i.sstatic.net/DATNq.png" />
  <img class="small-img" src="https://i.sstatic.net/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

Upvotes: 0

Related Questions