0

I'm trying to place one image behind the other?

https://jsfiddle.net/emtao7wo/12/

enter image description here

<style>
    #img1 {
        position: absolute;
      clip-path: circle(85px at center);
    }
</style>

<img id="img1" src="https://i.imgur.com/BO6KOvw.jpg" width="170" height="113" style="top:41px;left:13px;">

<img width="180" height="180" src="http://i.imgur.com/4HJbzEq.png">
Fruchtzwerg
  • 10,999
  • 12
  • 40
  • 49
  • What do you mean? also, that is poorly written. Place your CSS in another file and link to it. Put your style within the css. Also the second image tag should be `img` not image. Now I see your example. You are probably going to need to float one of the images and position it. Its been awhile so I cant help with the example code. – Evan Carslake Nov 02 '17 at 20:21
  • I'll wait for someone to help then. Thanks. –  Nov 02 '17 at 20:23
  • Possible duplicate of [How CSS Positions work, why absolute elements stack up on each other instead of stacking one after other](https://stackoverflow.com/questions/20718577/how-css-positions-work-why-absolute-elements-stack-up-on-each-other-instead-of) – admcfajn Nov 04 '17 at 08:31

2 Answers2

0

Change the left and top value from the img1 style. For example: style="top:33px;left:5px;" If this is not, what you looking for, please provide further information.

Eugene
  • 26
  • 5
  • OK, now how do I put it behind the transparent image: https://jsfiddle.net/emtao7wo/12/ –  Nov 02 '17 at 20:58
  • In the updated fiddle, it looks correct (according to your original image provided). – Tim K. Nov 02 '17 at 21:02
  • @coding4567 Add this style to the image, which should be in front. `position: absolute; z-index: 99;` [https://jsfiddle.net/emtao7wo/14/](https://jsfiddle.net/emtao7wo/14/) – Eugene Nov 02 '17 at 21:06
  • Something has to be adjusted: Not centered here: https://www.w3schools.com/code/tryit.asp?filename=FL5FSITHYAS7 Hit run. –  Nov 02 '17 at 21:18
  • 1
    Try this: [https://jsfiddle.net/emtao7wo/16/](https://jsfiddle.net/emtao7wo/16/) but this is not responsive at all. – Eugene Nov 02 '17 at 21:27
0
  <style>
    #img1 {
      position: absolute;
      clip-path: circle(85px at center);
      z-index:99;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

    }

    .front {
      position: absolute;
      z-index: 98;
    }

    </style>

<div style="position:relative; width:180px; height:180px">
    <img id="img1" src="https://i.imgur.com/BO6KOvw.jpg" width="170" height="113">
    <img width="180" height="180" src="https://i.imgur.com/4HJbzEq.png" class="front">
</div>

https://www.w3schools.com/code/tryit.asp?filename=FL5GB343CY4X

apsuva
  • 459
  • 4
  • 7
  • The image should be behind the window, how do I do that? –  Nov 02 '17 at 22:15
  • Which image. Paste it name please – apsuva Nov 02 '17 at 22:22
  • Did I do this correctly? https://jsfiddle.net/hvzn2pvp/3/ Is that right? –  Nov 02 '17 at 22:43
  • I think this needs to be adjusted so they are both shown at the same margin. Margin visible here: http://jsbin.com/padidaroda/edit?html,output 0 margin here: https://jsfiddle.net/hvzn2pvp/4/1 –  Nov 02 '17 at 22:50
  • Why is there 0 margin when viewed on jsfiddle? –  Nov 02 '17 at 22:55
  • I think jsfiddle does their image codes differently, or all their codes. –  Nov 02 '17 at 23:12
  • if you want change images order then change z-index in the code. you want like that? https://www.w3schools.com/code/tryit.asp?filename=FL5ZF5GTJ8AJ add your code and check margin and padding body { margin:0; padding:0; } – apsuva Nov 03 '17 at 08:37