Docs

[L4MSP]

Hello.
I have used the following code to add an overlay color to a background image. Is it possible to make the color overlay a gradient?

#cs-content .overlay {
position: relative;
overflow: hidden;
}

#cs-content .overlay:before{
content: “”;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(77, 0, 2,0.75);
}

[Friech]

Hi There,

Thanks for writing in! Change your background-color: rgba(77, 0, 2,0.75); property value with a gradient. You can generate a gradient background-color here: http://www.cssmatic.com/gradient-generator

Hope it helps, Cheers!

[L4MSP]

Thank you. I had already used that based on a previous answer you folks provided to someone. When I use the css the background image no longer shows. This is my current code but where do I add the new cssmattic code? A reminder that this is a color overlay over an image. If I add the cssmatic code the image goes away.

/*
No need for style tags here;
simply get started by writing
CSS! Watch as your changes
are reflected live in the
preview area. Have fun!
*/

#cs-content .overlay {
position: relative;
overflow: hidden;
}

#cs-content .overlay:before{
content: “”;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(77, 0, 2,0.75);

}

/* NEW CODE CSSMATTIC */

background: rgba(169,3,41,1);
background: -moz-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 25%, rgba(109,0,25,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(169,3,41,1)), color-stop(25%, rgba(143,2,34,1)), color-stop(100%, rgba(109,0,25,1)));
background: -webkit-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 25%, rgba(109,0,25,1) 100%);
background: -o-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 25%, rgba(109,0,25,1) 100%);
background: -ms-linear-gradient(left, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 25%, rgba(109,0,25,1) 100%);
background: linear-gradient(to right, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 25%, rgba(109,0,25,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#a90329′, endColorstr=’#6d0019′, GradientType=1 );

[Jade]

HI there,

Would you mind providing your site URL so that we can check it?

Thank you.

[L4MSP]

This reply has been marked as private.

[Christopher]

Hi there,

I generated gradient background using provided tool and tried it on your site, it worked fine. Please see the attachment.

The code I used :

background: rgba(248,80,50,1);
background: -moz-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,0.59) 50%, rgba(246,41,12,0.58) 51%, rgba(240,47,23,0.42) 71%, rgba(231,56,39,0.18) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(248,80,50,1)), color-stop(50%, rgba(241,111,92,0.59)), color-stop(51%, rgba(246,41,12,0.58)), color-stop(71%, rgba(240,47,23,0.42)), color-stop(100%, rgba(231,56,39,0.18)));
background: -webkit-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,0.59) 50%, rgba(246,41,12,0.58) 51%, rgba(240,47,23,0.42) 71%, rgba(231,56,39,0.18) 100%);
background: -o-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,0.59) 50%, rgba(246,41,12,0.58) 51%, rgba(240,47,23,0.42) 71%, rgba(231,56,39,0.18) 100%);
background: -ms-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,0.59) 50%, rgba(246,41,12,0.58) 51%, rgba(240,47,23,0.42) 71%, rgba(231,56,39,0.18) 100%);
background: linear-gradient(to right, rgba(248,80,50,1) 0%, rgba(241,111,92,0.59) 50%, rgba(246,41,12,0.58) 51%, rgba(240,47,23,0.42) 71%, rgba(231,56,39,0.18) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=1 );

Hope it helps.

[L4MSP]

Thank you

[Rahul]

You’re most welcome!

Let us know if we can help with anything else.

Thanks for choosing the X-theme.

[Author]

Posts