How to Place an Image Over Another

How do I position one image on top of another in HTML?

Ok, after some time, here's what I landed on:

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

<div class="parent">
  <img class="image1" src="https://via.placeholder.com/50" />
  <img class="image2" src="https://via.placeholder.com/100" />
</div>

Put an image over another and keep the proportions (HTML - CSS)

You are aligning the second image using a percentage. Percentages are calculated based on the element's parent's properties.

For example, let's say your window has a width of 1000px. Your parent div, as a block, would expand to fit this width, so .parent also has a width of 1000px. .imageOver has a left position of 17%, which is 17% of 1000px = 170px. So for a window of width 1000px, .imageOver will be positioned 170px from its parent's left.

Now let's say you resize the window to have a width of 800px. The width of .parent is also 800px. Thus .imageOver will have a left property of 17% of 800px, which is 136px. So resizing the window from 1000px to 800px will shift .imageOver's position from 170px from the left to 136px from the left.

If you want to keep the image in the same position regardless of window size, use fixed units such as px to define its left and top properties.

For example:

.imageOver {
    position: absolute;
    top: 40px;
    left: 220px;
}

Or whatever values position the image to best fit your situation.

Place images over another based on that image coordinates

If I understood properly your question, could be enough just to place your chair image relative to the background one. I would wrap your background in a container which will be the relative one for any other absolute inner element.

Something like that:

.room-container {  position: relative;}
.chair {  position: absolute;    top: 400px;  left: 400px;}

<div class="room-container">  <!-- BG Image-->  <img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Hotel-suite-living-room.jpg" alt="Sample Image">      <!-- Chair image -->  <img src="https://www.ikea.com/us/en/images/products/ekedalen-chair-brown__0516603_PE640439_S4.JPG" alt="Sample Image" class="chair"></div>

Positioning and overlaying image on another image

Here's a simple example using divs instead of images: http://jsfiddle.net/sqJtr/

Basically, you put both of your images in the same container. Give the container a position that isn't static (in my example, relative). Then give the overlay image position: absolute and position it however you want using bottom and right.

Bootstrap Placing one image over another?

try this: (style="position:absolute;")

    <div class="col-md-3" style="padding-bottom: 10px; margin-bottom: 50px;">
                    <img class="img-responsive"  style="position:absolute;" src="img/other/sch1.png">
                    <img class="img-responsive"  style="position:absolute;" src="img/other/sch2.png">
                    <table id="contesttable" class="table" style="text-align: center;">
                        ..........
                    </table>

</div> 

https://jsfiddle.net/oLo2psLn/enter link description here

you can then use in your styles: z-index:1; or z-index:2;
this will select which image goes on top, higher value goes on top: so 2 on top of 1.

How to set an image on top of another image?

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.

How to center one image over another

I generally use another image absolute positioned as background. like:

<div>
<img class="background-img" width="100%" height="100%" style="position:absolute; top:0; left:0">
<img class="second-img" width="100%" height="100%" /> 
<!-- Then do the positioning with classes -->
</div>

Give it a shot, hope it works as you want

Position a image over another existing `img /` in CSS

you might want to do something like this:

  <div class="imageWrapper" style="position: relative; width: 195px; height: 195px;">
   <img src="/path/to/image.jpg " alt=.. width=.. height=..style="position: relative; z-index: 1;" />
   <img src="/path/to/play.jpg " alt=.. width=.. height=.. style="position: absolute;left:80px; top: 80px;z-index: 10;" />
  </div>

of course do not use style="", but put styles into separate CSS files.

Explanation:

put two images into div. If you give position: relative; property to your wrapper div, then anything inside this div would be position relatively to it. It means, you can add position: absolute; to the play image and using left: XXpx; and top: XXpx; you can position it where you want. You might want to use z-index to define which picture should be on the top. The higher z-index the higher layer. Please note: z-index works only if position is set.

---

Related Topics