Some know how to put image over other over image? I tried couple times with CSS and got stuck

HTML:

<div>
    <!--background-->
    <img src="pics/bg.png" width="100%" >
    <!--icon-->
    <img src="pics/icon.png" >
</div>

CodePudding user response：

To layer images you can position them with absolute positioning. For example, if your img elements were to have id’s of img1 and img2, this is how the CSS should look to stack img2 on top of img1 (with some additional padding to make it obvious):

#img1 {
position: absolute;
}

#img2 {
position: absolute;
top: 10px;
left: 10px;
}

You could also add a z-index: <number_here> property to both of the CSS rules for each of the images. Here, the image with the higher number for its respective z-index would show above the other. The z-index is used for stacking elements depth-wise (think x, y, z coordinate system - the z adds depth).

If you don’t know how to add an id field to an HTML element, check this link.

CodePudding user response：

One way is to absolutely position your icon (.logo) image.

An position: absolute element is positioned in relation to its nearest ancestor that is positioned. By making the parent <div> positioned, you can place the .logo on top and adjust its placement with top and left.

.container {
  position: relative;
  width: 300px;
}

.logo {
  position: absolute;
  border: 2px blue solid;
  top: 10px;
  left: 10px;
}

<div >
  <!--background-->
  <img src="https://placekitten.com/300/100">

  <!--top-->
  <img src="https://placekitten.com/100/75" >
</div>