Darken Background Images on Content Banners through CSS – Themeco Community

Darken Background Images on Content Banners through CSS

benlaube — Mon, 09 Mar 2015 05:52:13 +0000

Would be cool if you could easily darken background images that you assign to content bands. I know this is possible through CSS and would be easiest to do rather than edit the image and re-upload it. The CSS that’s needed is:

background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(‘http://placehold.it/350×150’);

However, it’s practically impossible to edit the CSS that controls the background image right now on Content bands

Reply To: Darken Background Images on Content Banners through CSS

Christian — Mon, 09 Mar 2015 09:06:36 +0000

Hey Ben,

You can insert that code in the content band’s style field and it’ll override the background. I’ve tested it in my dev site.

Thanks.

Reply To: Darken Background Images on Content Banners through CSS

cliffhilton — Tue, 23 Feb 2016 18:42:26 +0000

I cannot get this to work… I plug my image in the url spot and it show the image but is not transparent (darker) on top. And if I remove the image the background color is there (50% black). Any help here?

Using Cornerstone. Section background type is slashed out (tried with a background image as well). And I have this css in the style block.

background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(‘http://www.cliffhilton.com/corradovr6/wp-content/uploads/2016/02/my-car.jpg’);

Reply To: Darken Background Images on Content Banners through CSS

Lely — Wed, 24 Feb 2016 04:01:11 +0000

Hi There,

When I tried that CSS this is the result:

Do you want a transparent black on top of the image in a section like this:

If yes, please add class black-overlay on the section class field.
Then add the following CSS on Settings > Custom > CSS

.black-overlay{
background: url('http://www.cliffhilton.com/corradovr6/wp-content/uploads/2016/02/my-car.jpg') center no-repeat !important;
position:relative;
}
.black-overlay:before{
background: rgba(0,0,0,.8);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

}

Hope this helps.