How do I make a static background have two colors like in this website?

[summerslough]

Hello! I’m trying to recreate this background so there can be two colors that overlap under the image.

So far I can only figure out how to do the colors by section but then can’t position the image correctly or anything that falls after it. Please help!

Thank you!

---

Here is my site Read-Only: https://preview.webflow.com/preview/cleatstreet-14d238d93153c3ed320bb3d4033?utm_medium=preview_link&utm_source=designer&utm_content=cleatstreet-14d238d93153c3ed320bb3d4033&preview=2c958336fb43a99b4a4b63fbbb100044&pageId=5fd8feb8ad191646b2c48b9d&mode=preview
(how to share your site Read-Only link)

[blakelam]

Hi @summerslough!

You can use a gradient background to achieve that effect. You can add two gradient stops at the same location to get the hard line in between the colors rather than fading the colors together. In the image below, I’ve added a white gradient stop and a gray gradient stop at 50%. You can adjust the percentage to change where the colors meet.

I hope that helps!

[summerslough]

Thank you very much! Works perfectly.