Header Image - Row Overlay

I have installed an header image but it’s has a dark tint overlay.
The overlay appears to be coming from "ROW OVERLAY under Colors in the Customizer.

Can I remove this dark overlay? If so, how?

I’ve tried changing its color and that brings on other unwanted distortions of the header image.

Hi, you can apply custom css below to remove overlay:

.overlay {
  background: transparent;

Apply it with simple custom css plugin if you like.

I am struggling to understand how to modify the CSS to make this and other changes.
The .overlay class is not in any Sydney theme CSS file that I can find–it’s defined on the page at the bottom of this page code excerpt from the browser as follows.

So how/where do I make the change? Where do I insert the modified code?

If you can direct me to some resource that will help understand how to modify styles in a WordPress document, I would really appreciate it.

Thanks ahead of time.

<style id=‘sydney-style-inline-css’ type=‘text/css’>
.site-title { font-size:32px; }
.site-description { font-size:16px; }
.main-navigation li { font-size:16px; }
h1 { font-size:52px; }
h2 { font-size:42px; }
h3 { font-size:32px; }
h4 { font-size:25px; }
h5 { font-size:20px; }
h6 { font-size:18px; }
body { font-size:14px; }
.header-image { background-size:cover;}
.header-image { height:600px; }
.site-header.float-header { background-color:rgba(255,255,255,0.9);}
.site-title a, .site-title a:hover { color:#ffffff}
.site-description { color:#ffffff}
#mainnav ul li a, #mainnav ul li::before { color:#ffffff}
#mainnav .sub-menu li a { color:#ffffff}
#mainnav .sub-menu li a { background:#1c1c1c}
.text-slider .maintitle, .text-slider .subtitle { color:#ffffff}
body { color:#767676}
#secondary { background-color:#c4c4c4}
#secondary, #secondary a, #secondary .widget-title { color:#767676}
.footer-widgets { background-color:#494949}
.site-footer { background-color:#595959}
.site-footer,.site-footer a { color:#154984}
.overlay { background-color:#000000}

  • the overlay class is styled in style.css without the background color, which is added dynamically;
  • simply install the plugin that dimikjones suggested, add the code and that’s it. If it doesn’t work switch background: transparent; to background: transparent !important;
  • curious what you mean by this: other unwanted distortions of the header image.. Something breaks or it’s just the overlay that bothers you?

Thank you.

I found style.css in the www directory.
I was able to edit the css and save it to implement a change.

But it is not a simple matter to locate the css that needs changing.

For example, I would like to change where the action button lands. I have no idea where to find the code needed to modify the button’s landing position.

Any tips would be greatly appreciated.

Hi, you can find CSS classes easier with google chrome developer tools. While on your page hit F12.

Note: it is better to make your changes with plugin I mentioned and not directly in style.css file because you will lose changes on next theme update.

Helpful. Thanks alot!