Create top angle in on image background

Support
#1

Hi Themeco,

How can i create a top angle in a section with a background image? It works with the bottom of the section by giving the next section a top separator. But it doesn’t work with the top of the section, by giving the previous section a bottom separator.

Any idea on how to solve this?

Thanks, Menno

#2

Hi Menno,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your email. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

#3

Hi @thai,

I would like to have the image at the position of the black separator in my screenshot. So the upper sections creates a mask of the image background from the next section.

#4

Hi Menno,

This might be an issue with z-index. Can you try adding z-index value on top section. On top section where you add bottom separator, go to Customize > Element CSS : Add the following:

$el{
   z-index:999;
}

By default bottom section has higher z-index value compare to top section. It this still doesn’t work, please share exact URL with issues.

Hope this helps.

#5

@Lely I tried that but i think it works now by adding a !important after the z-index. The key is to make all separator and z-index changes to the sections which don’t have a background image. This is the result: https://www.aafysio.nl/fysiotherapie-fysiotherapeut-friesland/leeuwarden/techum/

$el{
z-index:999 !important;
}

#6

Hey @mennobouma,

You actually do not need CSS for this as the structural elements (Section, Row, Column and the Bar in Pro Header and Footer Builders) has a z-index option. Using that option also, you won’t need the !important rule.

The key thing to know is how z-index stacking works. You are correct that you need to configure the z-index of the separator sections. Their z-index should be higher than one they’re covering.

The default z-index of the structural elements is 1. Setting the z-index of separator sections to 2 or larger would do the trick.

Hope that helps.

#7

I did not see the z-index option in the builder. Great! It works like a charm now :slight_smile:

#8

Glad to hear it’s working now :slight_smile:

#9

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