Keep background image aligned with content

Design help Layout & Design
1

Hey everyone,

I have a simple background for a landing page section that I designed/exported in Figma. Ideally, I want the angled background shape to line up with the edge of a photo in the content (see below) but whenever the screen size shrinks the background is no longer aligned with the image. Is there any way to keep them aligned on all screens? Sorry if this is a noob question and thanks in advance for any help!

Screen Shot 2022-07-04 at 1.18.32 PM
Screen Shot 2022-07-04 at 1.18.32 PM1920×933 47.7 KB

Screen Shot 2022-07-04 at 1.18.39 PM
Screen Shot 2022-07-04 at 1.18.39 PM1652×926 103 KB

Read only: https://preview.webflow.com/preview/brand-partnership-bible?utm_medium=preview_link&utm_source=designer&utm_content=brand-partnership-bible&preview=637dcc779ac0ae66460030e9cef07ba0&workflow=preview

2

Hi,

I believe this will be very difficult to achieve due to the large section/container and dynamic content inside.

  1. You can try making a single smaller section/container for this purpose with the image card inside and some margins top and bottom.

  2. I can see you are using a background image for the diagonal grey/white. The image is low-res and pixelated and you can achieve this effect without the image, just with the gradient.

To do this, set a background gradient from grey to white and add 2 extra points on top of each other, roughly in the middle - one white and one grey. Play with the angle to align it with the picture.

This will get rid of the pixelation and should improve page speed.