Docs

[Dadparvar]

Hi,

I added a background image for a layout in my site. Then in custom css of it, I added this:
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) );
To darken it. But it doesn’t work. When I add this code, the image goes away and all the background becomes black.

Regards

[Dadparvar]

I also tested this and not worked too:
background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) );

[Paul R]

Hi,

You can try this code instead

body {
  background: #000;
  background-image: url("IMAGE_URL"); /* fallback */
  background-image: url("IMAGE_URL"), linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ); /* W3C */
}

Hope that helps.

[Dadparvar]

Not worked. I just appropriate code for that layout’s background, but it keeps it lighten as it is and no darken effect appears.
Even I deleted the background image chosen from the layout’s manager section, and added this codes for it, and it added the background, but not dark mode. The normal mode of it.

[Rupok]

Hi there,

Would you share your URL and the code you are using (after updating with image link).

Thanks

[Dadparvar]

This reply has been marked as private.

[Dadparvar]

This reply has been marked as private.

[Lely]

Hello There,

Thank you for the screenshot. Please add the following instead on Settings Tab > Custom CSS:

div#x-section-7 {
   background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://dadparvar.ir/wp-content/uploads/2016/05/1500-750.png') !important;
    background-position: 50% 50% !important;
    height: auto;
    background-size: cover !important;
}

Hope this helps.

[Dadparvar]

Thanks.

This just worked.

[Christian]

You’re welcome. Glad we could help. 🙂

[Dadparvar]

Just a new question here.

I don’t know why when I use this code to darken the bg image, then the parallax for that bg will not work anymore.

Any opinion will be appreciated.

[Christopher]

Hi there,

Please update your code to :

div#x-section-7 {
   background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://dadparvar.ir/wp-content/uploads/2016/05/1500-750.png') !important;
    height: auto;
    background-size: cover !important;
}

Hope it helps.

[Dadparvar]

Thanks

Did it, but not worked. Still the bg image looks fixed and parallax is not set on it.

[Christopher]

Hi there,

Please enable parallax.

Update your CSS to :

div#x-section-9:before {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

Add this code as well :

#x-section-9{
position:relative;
}

Hope it helps.

[Author]

Posts