Background-upper-layer Linear GRADIENT?

Support
#1

Hi there,

I’m wondering if there’s an easy way to add a linear-gradient to an upper-bg-layer of a section? As far as I can see in the code: https://www.dropbox.com/s/s0h8synslfk8u84/Screenshot%202019-08-07%2014.58.20.png?dl=0

It is hardcoded. How would you go about doing this?

background: rgb(0,119,255);
background: linear-gradient(90deg, rgba(0,119,255,1) 0%, rgba(0,204,255,1) 100%);

#2

Hi @Pbalazs89,

Those are the generated CSS that are added as an Inline CSS based on the settings that are assigned to the background area. Currently background gradient is not an option for the background but it is possible with some custom CSS through the element CSS option of the section.

Please add this code to the Element CSS of the section that you want to place the background gradient:

$el .x-bg .x-bg-layer-upper-color {
    background: rgb(0,119,255) !important;
    background: linear-gradient(90deg, rgba(0,119,255,1) 0%, rgba(0,204,255,1) 100%) !important;
}

Hope this helps.

#3

Thanks a bunch!

#4

You’re most welcome!

#5

I tried doing it this way but it does not seem to work:

Any idea why?

#6

Hi @Pbalazs89,

The CSS code given works on my end, try clearing your browser’s cache, test it on your other site as well and If it does not still work, please provide us the page URL.so we can take a closer look.

Thanks,

#7

Hi there,

Unfortunately, this site is hosted locally, but I tried it on other sites as well.
Could you show a demonstration on another site that is online?

Just put it into a section, doesn’t matter where, the site is not live.

I’ll send the login details in a private message.

#8

Hey @Pbalazs89,

Please check the link in the secure note for the draft page I have made for reference.

Hope this helps.

#9

Thanks, wunderbar!

#10

You’re always welcome!

Cheers.

#11

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