Customize section background to have split color.

I like how this image is sitting between two color sections. I want to achieve similar results with Squarespace 7.1
(here is an original website - where the image is from)

I was thinking the easiest way is to split one section background in 2 color zones. (I could upload PNG background image with two color zones but I am afraid it may get blurry on some screens) Ideally, I would like to achieve this with CSS color fill.

You just need to use a shape block and put it behind half of the section. Make sure you have the section set to fill screen so the grid goes top to bottom, and you can then extend that shape block to the very top, left and right.

11 minutes ago, Ziggy said:

You just need to use a shape block and put it behind half of the section. Make sure you have the section set to fill screen so the grid goes top to bottom, and you can then extend that shape block to the very top, left and right.

Thank you for suggestion - I have tried that just now and it seems working. However it does require me to adjust position of that shape for desktop and then for mobile view every time. I would prefer to use a code solution to this.

Use this code, and add a gradient with a hard change:

https://www.heathertovey.com/blog/gradient-backgrounds/#version-7-1

Like this linear gradient:

background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(0,0,6,1) 50%, rgba(193,67,67,1) 50%, rgba(193,67,67,1) 100%);

Use this tool:
https://cssgradient.io/