Tiny Gap Between Sections When Using SVG Separators & CSS Gradient Backgrounds

[DannyC]

Hi,

I’ve been redeveloping my site recently and I’ve been working on using SVG separators and CSS gradient backgrounds in a layered fashion to make a more liquid flow to the design.

The issue I have is that there is a tiny (not even 1px) gap between the sections where the background pops through and breaks the flow.

I’ve attached a screengrab for reference and here is the staging site to look at too:

https://wordpress-227779-902472.cloudwaysapps.com/

Things I’ve Tried:

• Altering the z index of different elements
• Changing the background colours
• Adjusting padding & margins (negative values)

Any thoughts as to what may be causing this and how to fix it?

Thank you very much

[friech]

Hi Danny,

Thank you for writing in, those lines are part of the image. These are how those images look when added as just a simple image element, you can see that it have their respective lines.

You need to edit your svg file and remove those lines.

Hope it helps,
Cheers!

[DannyC]

Hi,

Thanks for the quick response there. looks like I tried everything except testing the actual SVG divider haha.

Great spot there and thanks for the example too.

I’ve added some bleed to each of the dividers now and they all appear correct.

I think it’s because in my design software, they all had large dimensions, but when converted to SVG’s they lose those dimensions (because it’s scalable) and therefore the bleeds or lack of) were magnified.

This looks great now.

Thanks for your help.

Dan

[nabeel]

Glad we could help Dan.

Cheers!