My current layout is achieved using background-position: center and background-size: cover. Take a look at the image here: https://i.sstatic.net/552RA.png, originally sourced from this link.
I am aiming to modify the appearance of the layout to resemble this design: https://i.sstatic.net/rOvsO.jpg. My strategy involves setting an anchor point on the image and instructing CSS to utilize this anchor point using the following code snippet:
background-position: x y;
I seek guidance on how to implement this change. It's important for me to maintain the image without cropping it as the screen size varies, ensuring more visibility of the picture upon resizing or when viewed on mobile devices. I also want to prevent any distortion by maintaining the aspect ratio similar to how background-size: cover functions, but with a customized anchor point.