Question 45498 in CSS Question posted in
Some basic documentation can be found here.

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

I Literally spent 4 hours trying to find the solution

Tags:

2

Answers


  1. 0

    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" />
    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search