Element css gradient not working in live view

[health2018]

Hi there,

I was adding a background gradient to a section using the element css and it works correctly in cornerstone but not when i view it live.

here is what i added in the css:

$el {
background: rgba(154,188,228,1);
background: -moz-linear-gradient(top, rgba(154,188,228,1) 0%, rgba(154,188,228,1) 12%, rgba(167,197,232,1) 22%, rgba(255,255,255,1) 89%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(154,188,228,1)), color-stop(12%, rgba(154,188,228,1)), color-stop(22%, rgba(167,197,232,1)), color-stop(89%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(154,188,228,1) 0%, rgba(154,188,228,1) 12%, rgba(167,197,232,1) 22%, rgba(255,255,255,1) 89%);
background: -o-linear-gradient(top, rgba(154,188,228,1) 0%, rgba(154,188,228,1) 12%, rgba(167,197,232,1) 22%, rgba(255,255,255,1) 89%);
background: -ms-linear-gradient(top, rgba(154,188,228,1) 0%, rgba(154,188,228,1) 12%, rgba(167,197,232,1) 22%, rgba(255,255,255,1) 89%);
background: linear-gradient(to bottom, rgba(154,188,228,1) 0%, rgba(154,188,228,1) 12%, rgba(167,197,232,1) 22%, rgba(255,255,255,1) 89%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9abce4', endColorstr='#ffffff', GradientType=0 );
}

what could be the issue? i have done this before without any problem? what am i missing?

[rad]

Hi Connor,

Thanks for reaching out.

It’s not gonna work since section doesn’t use a direct background, instead, it has separate elements that assigned as background. The correct CSS should be,

$el .x-bg-layer-upper-color {
background: rgba(154,188,228,1);
background: -moz-linear-gradient(top, rgba(154,188,228,1) 0%, rgba(154,188,228,1) 12%, rgba(167,197,232,1) 22%, rgba(255,255,255,1) 89%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(154,188,228,1)), color-stop(12%, rgba(154,188,228,1)), color-stop(22%, rgba(167,197,232,1)), color-stop(89%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(154,188,228,1) 0%, rgba(154,188,228,1) 12%, rgba(167,197,232,1) 22%, rgba(255,255,255,1) 89%);
background: -o-linear-gradient(top, rgba(154,188,228,1) 0%, rgba(154,188,228,1) 12%, rgba(167,197,232,1) 22%, rgba(255,255,255,1) 89%);
background: -ms-linear-gradient(top, rgba(154,188,228,1) 0%, rgba(154,188,228,1) 12%, rgba(167,197,232,1) 22%, rgba(255,255,255,1) 89%);
background: linear-gradient(to bottom, rgba(154,188,228,1) 0%, rgba(154,188,228,1) 12%, rgba(167,197,232,1) 22%, rgba(255,255,255,1) 89%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9abce4', endColorstr='#ffffff', GradientType=0 );
}

You can use these depending on which background is applied, like

$el .x-bg-layer-upper-color // for upper background color
$el .x-bg-layer-lower-color // for upper background color

$el .x-bg-layer-upper-image // for upper background image
$el .x-bg-layer-lower-image // for upper background image

If you’ll just add your CSS as is, then it will just be covered with upper and lower backgrounds.

Thanks and hope this helps