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?
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. 
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.
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