How do I get my background upper layer to cover my seprarators 2.0

Support
#1

Hello!

I have a section that has separators on the top and bottom. I have a upper background layer image on the section but it cuts off on the horizontal of the section rather than continuing on to cover over the top and bottom separators too. Is there a way to do this?

Thanks - I’m using Pro.

Web address is followacademy.com

James

#2

Hi There,

Separators won´t work with images.

You need actually to use the separatores on the section above and below your section which you have them right now in order to give the same effect.

As those sections are solid colored sections it will work fine.

Hope it helps

#3

This might be a dumb question but wouldn’t that just make a patterned effect rather than expanding the image into those sections like what I want?

#4

Hi There,

I am unsure I understand the point.

The separators work just with solid color backgrounds, so if you want to have this effect in a section which you have a background, you actually need to add the separator to the next section which will have a solid color.

Hope it clarifies

#5

Ok maybe we’re not talking about the same thing, the image I’ve used on the top layer doesn’t parallax through the separator and instead cuts off vertically where the section would end. Is there not a way to carry the image into the next section above where the separator has gone?

#6

Hi,

Thanks for the clarification. I understand what you are trying to do.

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

#7

Hey James,

I’m not sure if you’re dealing with the same thing as I am (wanting a triangle “above” the background image as a section divider") but, if so, this may work.

Add a row at the top and bottom of your section, ensuring that there’s no padding/margin, then for the triangles I’m using an SVG mask. Top row:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
	<path d="M0 0 L50 100 L100 0 Z" fill="white"/>
</svg>

Then in the bottom row:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
	<path d="M100 100 L0 100 L50 0 Z" fill="white"/>
</svg>

It’s not the most elegant, but it works.

#8

Hi There,

Thanks for helping!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.