Having this cool wavey theme to my website. Whenever a section gets longer I need to create a new background image for it. Is there are better way to have a wavey theme?

Design help General
1

Hello!

I really like this wavey theme for my website. However, it feels like the way I achieve is hugely inefficient.
I created background images in figma with the wave and overlap these sections. However, if a section ends up being too long, I need to create a longer version of that background image and upload it to webflow.

These images tend to be huge. Some are close to 4mb and I am afraid this will affect page loading. There must be a better way to build this directly in webflow.

How would I do that?

Best wishes,
Julian

This is what happens if the section is too long:
image

Here is my site Read-Only: https://preview.webflow.com/preview/octomo-landing-page?utm_medium=preview_link&utm_source=designer&utm_content=octomo-landing-page&preview=9e90aaae4c598004f497fd07251dc9dc&mode=preview
(how to share your site Read-Only link)

2

Hi
I tried to change the setting to transparent background and the wave does not show. Can I ask you which images are large? The ones I looked at where fairly small :wink: (must admit I do not know why this is)

transparen01
transparen012110×1062 254 KB

transparen02
transparen021996×1158 252 KB

3

Hey!
Thanks for you reply! :slight_smile:
The assets that have mobile in their name are usually much vertically longer than the other ones.

4

@fredj32 i noticed your images in the Program Highlights section are set to fill. Now they look distorted. I you set them to cover, the dimensions are respected and looks way better.

Or maybe it is intended, in that case I havent said a thing :slight_smile:

5

Hey!
@new_work_city it is semi-intended. The reason why I did that was because I want the colorful lines to be clearly visible and uninterrupted. If I put it on cover it isn’t distorted but the lines get out of the picture. So the distortion is the lesser evil.

Do you have any idea how to have the lines without the distortion on all screen-sizes?

6

Hello,

Does anyone have a solution for this? Still trying to find a way to make it work!

7

Not sure how this can be achieved in Webflow, but I can point you in the right direction. Usually, what you want done is achieved this way:

SVG curves (no need for your HUGE images now, and responsive to your various breakpoints) as dividers.

Did some Googling for you, these might help.

Spent 5 seconds searching for these links, so if you search a bit more, you can probably find a concrete solution. Considering that this is a common thing that people want to achieve.

1 Like