How do i set an image on top of another image(background) in CSS?-CodePudding

I Literally spent 4 hours trying to find the solution

CodePudding user response：

I can't tell what you tried, but would something like this work? Make sure to set the position to absolute.

img {
  width: 400px;
  height: 400px;
  position: absolute;
}

img:nth-child(2) {
  margin-left: 200px;
}

<img src="https://htmlcolorcodes.com/assets/images/colors/black-color-solid-background-1920x1080.png" />
<img src="https://htmlcolorcodes.com/assets/images/colors/red-color-solid-background-1920x1080.png" />

CodePudding user response：

You need the image inside html and the background set on the parent. Position relative needed in order to be able to use position absolute on the img inside div. You can change the opacity of img in css. You can use z-index if you want to change the order.

You can put both img inside html if you don't want to use background-image.

//html
<div>
  <img src="https://www.akamai.com/site/im-demo/perceptual-standard.jpg?imbypass=true"></img>
</div>
// css
div{
  width:500px;
  height:500px;
  margin:0 auto;
  background-image:url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/640px-Image_created_with_a_mobile_phone.png");
  position:relative;
}
img{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  opacity:0.5;
}