How to put one picture on the other?

[slon]

Hello there. Newbie question.

I have picture (picture 2) and I want to slightly put it on the picture 1 (picture 1 is not a background) . How I can do that?

a pictorial image of what I would like to get

[LisaLoop]

There are multiple ways you could approach this.
I suppose the easiest would be to use a design software to create one image out of the two images so that you don’t need to worry about weirdness happening when the layout shifts. You can use tools like Sketch, Ai, or Photoshop, and there are free tools such as Gimp as well to accomplish this.
Another way would be to absolutely position image 2 on top of image 1. You would do this by putting both images in a container element that is relatively positioned. Then you can add the position absolute rule to both pictures and position image 2 as you need, using the top, bottom, left, right syntax as needed.

I hope that helps!

[LisaLoop]

Here’s a small example in Codepen

positioning example

[raven666]

there are multiple ways to do it, my way would be put both images in a container with relative position, and image 2 with absolute position, then with left or transform position the image where you want:

.container {
    position: relative;
}
.image2 {
    position: absolute;
    left: -100px;
}

html:

<img src="your-logo />
<div class="container">
    <img src="image1" />
    <img src="image2" class="image2" />
</div>

Read more about positioning: Positioning - Learn web development | MDN