Header not fully transparent

Hello @significent,

Please navigate to Customizer > Header > General at the end of the settings and set the Transparent background. Please check this screenshot: https://i.postimg.cc/R0fhZzF3/image.png.

You can set something like this: https://i.postimg.cc/65gVN0S0/image.png.

Hope this helps.

Best Regards

• This reply was modified 2 years, 5 months ago by Shahin.

Shahin:

I had tried modifying that setting. If I make it white, I see a light gray background and no transparency. Clearing the color results in the transparency I have (with the dark gray background).

https://i.postimg.cc/1XVppFWz/Background-Color.png

Any other thoughts?

Thanks!!

BTW, the setting you recommended, rgba(0,0,0,0), resulted in no change. I still had the dark gray tint to the transparency.

This is what I’d like the header too look like:

https://i.postimg.cc/BZ833hjF/Gridiculous.png

I was able to set this up in an old theme that hasn’t been supported for over 10 years.

Hello @significent,

Please try to set the transparent color on this option: https://i.postimg.cc/yYYQwSty/image.png. If it doesn’t work, then please put the CSS below in Customizing > Custom CSS/JS > CSS Code:

#site-header.has-header-media .overlay-header-media {
    background-color: rgba(0,0,0,0) !important;
}

For more information about the CSS/JS code on the customizer, please read this link:
https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

Note: if you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, don’t forget to click on the regenerate all assets file and data in Elementor > Tools.

Best Regards

I tried to set the overlay color to white, black and any other color. That simply overlayed my header image with the color chosen. The default color, rgba(0,0,0,0.3) allowed for the same gray tint header transparency. I had played with this setting before with the same result.

Then I tried the CSS snippet. That worked perfectly and is now the only CSS I need for the site to be rendered properly. THANK YOU! With this CSS in place, it appears the overlay color doesn’t matter. How did you figure out this would resolve the problem?

Although wpengine.com, where my site is hosted, does have server caching. I had cleared the server’s cache multiple times as part of my troubleshooting with no effect. I have no cacheing plugin installed.

I wish I was able to use the Elementor plugin. Early on, when I had it installed, my background image disappeared on each page I edited with it. I couldn’t find a solution to that problem, so I uninstalled Elementor.

Thanks again for your help.

Hi @significent,

You’re welcome. Glad it helped.

You can learn how to use Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS:
https://developers.google.com/web/tools/chrome-devtools/
https://developer.mozilla.org/en-US/docs/Tools
CSS Tutorial: https://www.w3schools.com/css/

And for responsive sizes, put your CSS on custom screen size:

@media only screen and (max-width: 480px) {
    /* put your CSS here*/
}

Or use between sizes:

@media (max-width: 960px) and (min-width: 481px){
    /* put your CSS here */
}

For more information about media queries, please read this article:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Best Regards