Streaming live at 10am (PST)

Need help creating a curvy section

#1

Hello there!
I’m creating this website and I need to make a curvy section.
And actually, I did. But it doesn’t work.
As you guys can see in the project I’m sharing, I made the blue section with both bottom and top curvy, but when I preview the project, the bottom remains flat. The same thing happens when I publish the website.

Is there anything I can do to fix this?
Thanks already for the help!

Here is my site Read-Only: https://preview.webflow.com/preview/speed-360?utm_source=speed-360&preview=64819d94103f885fcc12bbef884fc6e9

#2

I can see the curves in Preview and on .io.

#3

Ah, I see, when your viewport is too large then your background image is cropped on the bottom.

So you need to use images on top and bottom, preferably SVG images, that will stick to the bottom and top of the section and enlarge with it.

#4

I see. In that case, It has to be a vector image. Am I correct?

btw, I would never thought of the size on viewport. Always learning. Thanks for the tip!

#5

No but a bitmap image has chances to be degraded when stretched.

You could also use divs and round corners to make ovals and displace them out of the section, using overflow hidden on the section. Use radius with values in % for ovals.