How to design a responsive two colors bg?

Hi there,
I’m trying to build something like this in Webflow:


But I’m not quite sure how to make the bg responsive. If I use a static image it will not shrink as I want when the screen size changes. I thought about using a gradient but I’m embarrassed to say I never understood how gradients works (everywhere even powerpoint)

hi @Mehmet here is link to tech specs but there is many articles on internet related to this technique. Is not too hard understand how it works. just invest at least least one day but I believe you can grasp it in 30min.

I have done one example for you to start with.


once you will understand you can create this design with WF UI tools to add 2 extra points and set % and deg on image below are 2 extra points in middle one is black @50% and one white @50%

CleanShot 2022-05-04 at 23.00.43

Hope that will solve your request