Positioning and overlaying image on another image

Question

See how the tiny Facebook icon is positioned in the lower right-hand corner over another image?

enter image description here

How can I do that using a combo of HTML/CSS/Rails/Prototype!? An example would be great. Perhaps in jsfiddle.net.

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) — Suma, May 06 '14 at 13:14

score 31 · Answer 1 · edited Jul 30 '15 at 12:38

You can use css to solve the problem.

div {
  position: relative;
  display: inline;
}
.imtip {
  position: absolute;
  bottom: 0;
  right: 0;
}

<div>
  <img src="https://i.stack.imgur.com/Blaly.png" />
  <img src="http://www.w3schools.com/favicon.ico" class="imtip" />
</div>

Basically, I've done more or less what ZDYN said, just that you need to include a display: inline in the container otherwise the container div spans the whole width.

score 25 · Accepted Answer · answered Feb 27 '11 at 03:55

25

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.

answered Feb 27 '11 at 03:55

zdyn

2,155
1
15
17

best answer. this has been the easiest explanation to this problem I've seen, after many months of google searching – Pamela Sillah Nov 03 '22 at 15:59

score 2 · Answer 3 · answered Feb 27 '11 at 06:00

Here you go. This is done using 2 images.

<div class="parent">
    <img src="http://i.ehow.com/images/a06/dv/5g/buy-car-repair-manuals-online-200X200.jpg" />
    <div class="inner"><img src="http://www.airporthybridrentals.com/wp-content/uploads/2009/04/car-rental-sign.gif" /></div>
</div>

.parent{
    width:200px;
    height:200px;
    position:absolute;
    z-index:0;
}

.inner{
    position:absolute;
    z-index:1;
    bottom:0;
    right:0;
}

Check working example at http://jsfiddle.net/WPWzq/

thanks, the "z-index" was really necessary, without it didn't work — 88mary256, May 04 '16 at 16:00

score 1 · Answer 4 · answered Jun 22 '21 at 05:12

Try that:

html, body, .wrapper { height: 100%; }
.wrapper { position: relative; }
.top { height: 15%; background: #222; }
.mid { height: 70%; background: #CCC; }
.bot { height: 15%; background: #777; }
.container { 
    position: absolute;
    background: #FFF; 
    padding: 20px; 
    width: 80%;
    top: 10%;
    left: 50%;
    margin-left: -40%;
    clear: both;
}
.container > div {
    float: left;
    width: 42%;
    height: 250px;
    padding: 1%;
}
.container > div:first-child {
    background: #EEE;
    float: left;
    width: 54%;
}
.container > p {
    position: absolute;
    bottom: -100px;
    right: 0;
    border: 1px solid #EEE;
    width: 50%;
    height: 70px;
}

<div class="wrapper">
    <div class="top"></div>
    <div class="mid">
        <div class="container">
            <p>Some Text Here</p>
            <div>IMAGE HERE</div>
            <div>DESCRIPTION HERE</div>
        </div>
    </div>
    <div class="bot"></div>
</div>

Collected from stackoverflow.

score 0 · Answer 5 · edited May 23 '17 at 10:31

0

See my answer to this question.

The difference with your situation is that you don´t need any javascript if you don´t want to, you can just add divs to the html and position them absolutely on top of the photos.

I think I would personally add the divs using javascript anyway so that they don´t clutter the html.

edited May 23 '17 at 10:31

Community

1
1

answered Feb 26 '11 at 23:25

jeroen

91,079
21
114
132

Positioning and overlaying image on another image

5 Answers5

Check working example at http://jsfiddle.net/WPWzq/

Linked