Answer the question
In order to leave comments, you need to log in
How to responsively overlay an image on an image using CSS?
Please tell me how to solve the following problem:
There is a main photo 1.jpg, I need to overlay another picture 2.png on top of this image.
The second picture, which should be positioned on top not in the center but in a certain place. The most difficult task for me is that the alignment should be adaptive and when the screen size changes, everything should shrink correctly without changing its positioning.
Answer the question
In order to leave comments, you need to log in
Try to give a picture with a T-shirt this:
display: block;
position: relative;
width: 90%; /* это не важно */
display: block;
width: 30%; /* это наверное уже у тебя в js будет вычисляться */
position: absolute;
top: 22%; left: 40%; /* тоже через js будешь вычислять */
SVG to help you. codepen.io/paulradzkov/pen/QjxZzN?editors=100 Load
two images inside the svg container, position the sprite relative to the T-shirt. The svg itself behaves like a whole picture. You can also experiment with overlay effects.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question