Overlay Background

[JfantasyBooks]

Hi

SIte: https://fantasy-books.live
X Pro: 2.0.4
Wordpress 4.9.4

Problem:

I am trying to add an overlay over the background. Problem is, given how x theme is built, I’m not sure how.

Maybe all I need to do is put a div around whichever code holds the background? But how would I add that in the x them?

Any advise would be appreciated.

J.

[ruenel]

Hey There,

Thanks for writing in! Do you want something like this?

If that is the case, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

[class^="x-bg-layer"]:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(230, 117, 61, 0.35);

    width: 100%;
    height: 100%;
}

This code will give you a background color overlay to the section background image. Please noticed that the code is using rgba(230, 117, 61, 0.35). You can make use of this online tool to convert any color you want as rgba or hsla where you can have opacity to the color. The opacity is needed so that the background image behind it will be visible.

hexcolortool.com

Hope this helps.

[JfantasyBooks]

Hi.

I actually meant the site background.

But I found something that worked.

I used the .x-root css to overlay a color over it.

Thanks though.

[ruenel]

Hey There,

We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Best Regards.