Wrap an Image with transparent image without using position:absolute , top ,left ,right and bottom

Question

Is there a way to wrap an Image with transparent image without using position:absolute and top , left ,bottom and right positions ,I have tried to add div then img with transparent image url but it shows only the second image.

for example :

<style>
  .Image{
     width:100px;
     height:100px;
     border-radius: 50%;
   }
</style>

<div class="Image" style="background-image:'url(./assets/Image.png)'">
   <img class="Image" src="url(./assets/trans-image.png)"/>
</div>

it shows only the second image. --> which is logical since you made both to have the same size and one above the other — Temani Afif
– Temani Afif, Commented Jan 14, 2020 at 14:33

ConsoleLog · Accepted Answer · 2020-01-14 14:56:44Z

1

Something like this? You might have to change the background position of each depending on your choice of images as mine are both the same size.

.overlay-image {
  width: 300px;
  height: 100vh;
  background-image: url(https://i.ibb.co/GvXnt0J/top-img.png), url(https://i.ibb.co/VvdwhTc/bottom-img.png);
  background-repeat: no-repeat;
  background-position: 0 0, 0 0;
  background-size: contain;
}

<div class="overlay-image"></div>

answered Jan 14, 2020 at 14:56

ConsoleLog

5113 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sari Masri Over a year ago

Great Answer , thank you.the 'background-image' with multi url solve my problem

Collectives™ on Stack Overflow

Wrap an Image with transparent image without using position:absolute , top ,left ,right and bottom

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related