Streaming live at 10am (PST)

SVG Curve Section

So I’m trying to get this image to work as a section for my site.

It’s not working. I’ve tried different formats SVG and png, with no luck. I set it as background, and it will not stretch to the full browser width. Any suggestions?

Below is a read-only link to see what it looks like.

https://preview.webflow.com/preview/the-ones-first-project?utm_medium=preview_link&utm_source=designer&utm_content=the-ones-first-project&preview=52bd3a6f4e252d4cef54ec293aaba3c0&workflow=preview

Hey @ESOBlaze!

Thanks for posting here in the forum!

Could you please share a read-only link to your project?

Here’s an article showing you how: Share a read-only link | Webflow University

Right now, my website isn’t even a thing. I’m learning (or trying to at least) webflow, and one of the topics I’m learning now is how to set up shape dividers. I have been trying to take that image above I posted and use that as a section. If I understand correctly using the section element and setting that image as a background for that section is the way to go. However, I have tried doing this and the image stays small and in the center of the section element.

Sorry, I thought I added that link in my original post. I have added the link as requested. :slight_smile:

When you set the background as that SVG image, set it to background-size: cover and the background-position: top center then adjust the height of the section. That should solve your issue, let me know if you need further help. @ESOBlaze

Here is the result I have got: Awesome Screenshot

Here is the styling I used: Awesome Screenshot (note: switching the size to contain seems to also work for your image. Just depends the look you like.)

I did that, and now the image is showing up weird. Maybe I made the shape too big?

Yup, it does look better. Maybe I need to work on the shape itself a bit? - I’m new to all this it’s a learning process. :slight_smile:

Here is a tutorial that may help with the wave : Webflow Tutorial - Creating an SVG Wave Background - YouTube

If you need help with web design : Free Web Design Course 2020 - YouTube

Lastly, what you may want the most : Webflow 101 crash course | Webflow University

1 Like

Thanks for the links, that will help!

1 Like