Streaming live at 10am (PST)

How can I get this background image to be responsive?

Hi Everyone!

I am currently working on my first webflow page and so far it’s going well.
I am just struggling with this “Degree Section” and the background image which isn’t responsive at all.

I now have it morphing around but it just looks odd for most screen sizes. Previously it looked like in the screenshots.
I designed the image myself in Figma, so I have the full ability to change the input if required. Ideally I would like the section just to get wider vertically (basically the two colored lines to move further apart as the size of the screen decreases) and the image zoom in so that it doesn’t lose proportions too much.
For that I would have to recreate the wavey top and bottom in webflow and upload the image separately, right?
So my questions are:

  1. Is there a quick fix to make a 90% okay version fast and how does that work?
  2. What would be the ideal way to achieve a result that works on all common screen sizes?

My read only preview:


https://preview.webflow.com/preview/octomo-landing-page?utm_medium=preview_link&utm_source=designer&utm_content=octomo-landing-page&preview=c0335d5c5491004caad22f4f6fca4f1a&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

@fredj32- If you can’t achieve what you want on a particular breakpoint using background-position, backround-size, etc… then you can always create a new background image that is more suitable and set on any individual breakpoint (keep in mind the cascade).

That’s a good tip. Thank you, Jeff!