Docs

[tr38back]

Hello, I have tried the various CSS tweaks that I’ve found in similar topics, but nothing is working to allow me to place a section that has a transparent background – no color, so you can see the background image there.

I have multiple areas where I’d like to use this, so I have given this a class of transparentGap.

In the customizer, I have:

.site {
background-color: transparent;
}

In the page-specific custom CSS, I have:

.transparentGap {
background-color: transparent;
}

What am I missing?
Thanks

[Thai]

Hi There,

Please try with this CSS:

.x-boxed-layout-active .site,
.page-template-template-blank-6-php .x-main,
.transparentGap {
    background-color: transparent !important;
}

Hope it helps 🙂

[tr38back]

Thanks, it looks like this works.
Since I only want it for the class .transparentGap it looks like I’m able to leave it at:

.site, .transparentGap {
background-color: transparent !important;
}

Which is interesting because the only thing I had different was the !important tag was missing… I had tried them in series before.

Does that make sense?

[Joao]

Hi There,

!important gives priority to your code, so in case there is a “competing” CSS rule the !important will have priority.

Let us know if you need further help

Joao

[Author]

Posts