Placing an image centrally over another image with responsive width and height

Question

How to place an image centrally over another image? I tried the answers from so many similar questions, but none of them work for me.

Basically I need the 2 images to become 1 and

it MUST be RESPONSIVE(so the size changes automatically when different screen size devices access the web page.)

The heart and ring should remain the same position to each other when user resize his or her screen(or web page window size etc.)

I am trying to use css to draw both the ring and the heart, but it is okay if you really need the picture to replace the ring or heart.

Here is my code, I have been working on it for hours but haven't got any good luck. http://jsfiddle.net/4u6tfacw/

Thank you.

Here is my code

<div id="logo">
    <div id="heart-container">
    </div>
    <div id="heart">
    </div>
</div>

#logo {
    width: 50%;
    height: 50%;
}

#heart {
    display: block;
    position: absolute;
    top: 70px;
    left: 30px;
    z-index: 1;
    width: 70%;
    height: 70%;

}

#heart-container {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    /*bottom:0;
        right:0;*/
    z-index: 1;
    width: 70%;
    height: 70%;
}

#heart-container {
    border-radius: 50%;
    behavior: url(PIE.htc);

    width: 220px;
    height: 220px;
    padding: 8px;

    background: #fff;
    border: 2px solid #666;
    color: #666;
    text-align: center;

    font: 32px Arial, sans-serif;
}

#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 90px;
    top: 0;
    width: 90px;
    height: 130px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

#heart:after {
    left: 0;
    box-shadow: 10px 10px 100px #6d0019;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

Made this pen before I saw the fiddle (and answer): http://tinyurl.com/q6ztgbc. — Shikkediel, Mar 29 '15 at 16:59
@Shikkediel, it's slightly more difficult because of the rotated pseudo-elements that make the heart, but yes, you got the concept right. — Shomz, Mar 29 '15 at 17:02
I realised that after I noticed the fiddle but thought it was sort of a waste to not show what I put together up to that point (just as a comment though). — Shikkediel, Mar 29 '15 at 17:36

score 3 · Accepted Answer · edited May 23 '17 at 12:06

Well, here is my attempt to satisfy the requirements of the question — which is not only about putting an image/element over another one, but about achieving that in a responsive manner.

Key points

Using a percentage value on bottom padding to make elements' heights respect their width¹.
Using percentage values on top, right, left, bottom offsets as well as width and height properties².
Using a high value in pixels on border-radius instead of percentage — for instance 1000px.
And number four... well, the last step is trial and error!

Example on JSFiddle.

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    height: 100%;
    width: 100%;
}

#logo {
    width: 50%;
    /* height: 50%; */
    position: relative;
}

#logo:after {
    content: "";
    display: block;
    padding-bottom: 70%;
}

#heart {
    position: absolute;
    top: 26%;
    left: 35%;
    z-index: 1;
    width: 70%;
    height: 100%;
}

#heart-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 70%;
    /* height: 70%; */
    border-radius: 50%;
    behavior: url(PIE.htc);
    background: #fff;
    border: 2px solid #666;
    
    color: #666;
    text-align: center;
    font: 32px Arial, sans-serif;
}

#heart-container:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 39.130434782608695652173913043478%;
    height: 56.521739130434782608695652173913%;
    background: red;
    -moz-border-radius: 1000px 1000px 0 0;
    border-radius: 1000px 1000px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

#heart:after {
    left: -38.9%;
    box-shadow: 10px 10px 100px #6d0019;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

<div id="logo">
    <div id="heart-container"></div>
    <div id="heart"></div>
</div>

¹ _{Have a look at Responsive Container section of this topic.}

² _{To find exact values, we can position/size things in an absolute length — like px — and then just measure things relative to each other.}

Thank you Hashem for your detailed explanation and I followed your code, now my code is working~! how wonderful it is ^^ — Franva, Mar 30 '15 at 13:18

Shomz · Answer 2 · 2015-03-29T16:56:16.680

If you want to go responsive, you'd have to drop all the fixed (pixel) units and use percentages unless you plan to have several versions depending on the screen size and in that case you can use media queries.

So, the idea is to use percentages for paddings, margins, etc... and I've replaced the fixed width/height definitions you had with percentual padding, which made the circle responsive. See if you can do the same for the heart (I think using an image might save you a lot of time here).

#logo {
  width: 50%;
  height: 50%;
  position: relative;
}
#heart {
  display: block;
  position: absolute;
  margin: 18% 14%;
  z-index: 1;
  width: 70%;
  height: 70%;
}
#heart-container {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  /*bottom:0;
        right:0;*/
  z-index: 1;
  padding: 50%;
}
#heart-container {
  border-radius: 50%;
  behavior: url(PIE.htc);
  padding: 50%;
  background: #fff;
  border: 2px solid #666;
  color: #666;
  text-align: center;
  font: 32px Arial, sans-serif;
}
#heart:before,
#heart:after {
  position: absolute;
  content: "";
  left: 90px;
  top: 0;
  width: 90px;
  height: 130px;
  background: red;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 50px 50px 0 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
#heart:after {
  left: 0;
  box-shadow: 10px 10px 100px #6d0019;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

<div id="logo">
  <div id="heart-container">
  </div>
  <div id="heart">
  </div>
</div>

And the fiddle: http://jsfiddle.net/fzgd6cv8/

Let me know if you have trouble doing the same thing for the heart.

UPDATE

Here's my attempt for the heart, probably needs a bit of number tweaking:

#logo {
  width: 50%;
  height: 50%;
  position: relative;
}
#heart {
  display: block;
  position: absolute;
  margin: 20% 14% 0 9%;
  z-index: 1;
  width: 70%;
  height: 70%;
}
#heart-container {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  /*bottom:0;
        right:0;*/
  z-index: 1;
  padding: 50%;
}
#heart-container {
  border-radius: 50%;
  behavior: url(PIE.htc);
  padding: 50%;
  background: #fff;
  border: 2px solid #666;
  color: #666;
  text-align: center;
  font: 32px Arial, sans-serif;
}
#heart:before,
#heart:after {
  position: absolute;
  content: "";
  left: 60%;
  top: 0;
  width: 60%;
  padding-top: 100%;
  background: red;
  -moz-border-radius: 150% 150% 0 0;
  border-radius: 150% 150% 0 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
#heart:after {
  left: 0;
  box-shadow: 10px 10px 100px #6d0019;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

<div id="logo">
  <div id="heart-container">
  </div>
  <div id="heart"></div>
</div>

http://jsfiddle.net/fzgd6cv8/2/

Shomz I think of that as well but then I was stuck in #2 of OP's question, regarding keep same distance while resizing.. Hope you can fix that — dippas, Mar 29 '15 at 16:36
@dippas, yeah, using image there would save a lot of time, but I'll give it a shot now. — Shomz, Mar 29 '15 at 16:44
@dippas, I think this is as close as I could get: http://jsfiddle.net/fzgd6cv8/2/ — Shomz, Mar 29 '15 at 17:01
Haha, thank you :) Though I've lost its shape a bit, but anyway I've always been skeptical when it comes to CSS logos. — Shomz, Mar 29 '15 at 17:10
Thanks Shomz, thank you for explaining the underlying concept which is very helpful :) — Franva, Mar 30 '15 at 13:19

Placing an image centrally over another image with responsive width and height

2 Answers2

Key points

UPDATE