Image with transparent bg over opaque image

Question

I want to overlay a line image (no background, just the lines) on top of a solid image so that the lines are superimposed over the other, opaque image. I've tried it with the overlay as both a PNG and a GIF, but it keeps displaying as solid, completely covering up the second image. I've even tried playing with the z-index to no avail. Is this not possible? If it is, do you know what I'm doing wrong?

      .Overlay {
        position: relative;
        display: block;
        }
    
       .Solid {
        position: absolute;
        top: 0;
        left: 0;
        }

    <img src="overlay.png" width="640" height="480" class="Overlay"/>
    <img src="solid.jpg" width="640" height="480" class="Solid"/>

Mary Grass · Answer 1 · 2021-01-08T14:06:35.917

I would place the images inside a <div> and position the .Solid image as absolute in relation to that <div> and play with the z-index as follows:

div {position:relative}

      .Overlay {
        position: relative;
        display: block;
        z-index:0
        }
    
       .Solid {
        position:absolute;
        top: 0;
        left: 0;
        z-index:-1
        }

<div>

    <img class="Overlay" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/300px-PNG_transparency_demonstration_1.png"/>
    <img class="Solid" src="https://images.unsplash.com/photo-1418985227304-f32df7d84e39?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" width="640" height="480" />

 
</div>

Sam · Answer 2 · 2021-01-08T13:57:08.553

It’s probably best to have the overlay after the image so it automatically has a higher z-index and appears on top.

Secondly applying position: absolute; to the overlay would also make most sense.

Applying those suggestions gives you what you are after:

.Solid {
    position: relative;
    display: block;
}

.Overlay {
    position: absolute;
    top: 0;
    left: 0;
}

<img src="https://source.unsplash.com/random/640x480" width="640" height="480" class="Solid"/>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAAAKAgMAAACWKRulAAAACVBMVEVHcEz////////mcEUwAAAAAnRSTlMAmf9A5tgAAAAtSURBVHgB7dAhAQAgEACxMxjSEZGo3+H13PTqvOr+NiIJAjcSKFAgCRQoUCAN9G0+0KpreEYAAAAASUVORK5CYII=" width="640" height="480" class="Overlay"/>

NB: I assume you already have this in place and this is a striped down example of your code but as Mary Grass quite rightly points out, both the Solid and Overlay should be wrapped in a div with position relative. — Doing so will give both elements the same reference point for top and left.

score 0 · Answer 3 · answered Jan 08 '21 at 14:09

I would wrap both image in a single container to allow them to get the same reference for coordonates on the screen via position:relative; . from there , you can center or move both image to another place in the flow and keeping them stack on top of each others.

.Overlay {
  position: relative;
  display: block;
  width: max-content;
  margin:auto; 
}

img {
  position: relative;
  object-fit:scale-down;
  z-index:1;
}

.Solid {
  position: absolute;
  top: 0;
  left: 0;
  z-index:0
}

<div class="Overlay">
  <img src="https://pngimg.com/uploads/avatar/avatar_PNG29.png" width="640 " height="480 " />
  <img src="https://pngimg.com/uploads/mars_planet/mars_planet_PNG7.png" width="640" height="480" class="Solid" />
</div>

Grid can also avoid absolute positionning an stack them in the same grid cell.:

.Overlay {
  display: grid;
  justify-content: center;
}

img {
  grid-row: 1;
  grid-column: 1;
  object-fit:scale-down;
}

<div class="Overlay">
  <img src="https://pngimg.com/uploads/mars_planet/mars_planet_PNG7.png" width="640" height="480" class="Solid" />
  <img src="https://pngimg.com/uploads/avatar/avatar_PNG29.png" width="640 " height="480 " />
</div>

score -1 · Answer 4 · answered Jan 08 '21 at 13:48

What you can do is to remove the solid img (in the html) and in the css add this:

.Overlay {
   position: relative;
   display: block;
   background-image: url("solid.jpg");
}

If this still not working add the solid img again and then add background-color: transparent

Image with transparent bg over opaque image

4 Answers4