There is such a design

enter image description here

Pay attention to the right and left image. Here is the same design only for a smaller screen resolution.

enter image description here

As you can see, when the screen is reduced, the background images do not shift relative to the content - they are cropped at the edges

Here's how to make them not cut around the edges?

PS

background: url(/img/leftTopBack.png) no-repeat; background-position: left top; background-attachment: fixed;

This code does not work

  • Nothing at all is unclear - Russian Bear
  • background-position: center top; if truly understood the task. - Music Sergey

1 answer 1

SVG solution

Easily solves problems with positioning and adaptability of images when changing the size of the display. The image will not be cut around the edges if you add it inside the svg file.

 <image xlink:href="leftTopBack.png" width="100%" height="100%" />

When reducing, increasing the size of the screen, the container in which it is better to wrap, added inline svg, the image will be in the same coordinate system with the SVG and vary proportionally.

  <style> .container { width:100%; height:100%; background:grey; background-size:cover; background-position: 0% 100%; } </style> <div class="container"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 500 272" preserveAspectRatio="xMinYMin meet" > <image xlink:href="https://i.stack.imgur.com/zDLMO.png" width="100%" height="100%" /> </svg> </div>

  • @Goshka Tarasov If the answer was useful to you, please do not forget to put a plus and checkbox. - Alexandr_TT