I have a purple background color on this page, but I would like to create a linear gradient from top to bottom. Top would be the purple color and bottom would be white (#fff). I only see an overlay option as gradient option, but I don't want an overlay. Only a background color with a linear gradient. Would that be possible?
Yes that did the trick, thanks. I only have one problem. At the bottom of my page I have a row with the same background color. So that is also affected by this css. Could we solve that? Should I give the first row an ID, would that be an option?
Hi,
I have a purple background color on this page, but I would like to create a linear gradient from top to bottom. Top would be the purple color and bottom would be white (#fff). I only see an overlay option as gradient option, but I don't want an overlay. Only a background color with a linear gradient. Would that be possible?
Hi Tes,
Could you use the following CSS:
div.row-bg[style*="background-color: #cd33ff"]{ background-image: linear-gradient(#cd33ff, #fff); }add it to salient \ general settings - css script related - custom css code.
Its linked to the background color you have set right now.
Cheers.
Hi Eliud,
Yes that did the trick, thanks. I only have one problem. At the bottom of my page I have a row with the same background color. So that is also affected by this css. Could we solve that? Should I give the first row an ID, would that be an option?
Hi Tes,
Yes an row ID would work to uniquely apply the CSS to that row.
Assuming you use gradientRow as ID then the CSS will be:
div#gradientRow{ background-image: linear-gradient(#cd33ff, #fff); }Cheers.
Hi Eliud,
Unfortunately that didn't work, see: https://nescius.kleidi.nl/home/
It's not full width anymore (and I would not like to use full width content function)..
Thanks in advance.
Hi Tes,
Change the CSS to this:
div#gradientRow div.row-bg-wrap { background-image: linear-gradient(#CE36FF, #E597FF); }Cheers.
Thanks!