Kathryn on "Adding Opacity Overlay in Goran Header"

Hi there,

I'm building a site with Goran theme on my localhost.

I'd like to darken off some of my header images so the page-title text is more legible. I'd like to add it on a page by page basis, and I have a custom CSS plugin for pages.

I know it's something to do with:
.hero.with-featured-image {

but if I go and add an RGBA backround there, I lose my image.

It seems I need to layer the rgba background over the featured-image, but under the page-title.

Any help greatly appreciated.

Thanks!

My colleague Laurel put this together:

.hero .hentry, .hero-wrapper, .no-sidebar-full .content-area { position: relative; z-index: 3;
}
body.page-id-xxx.hero-image .hero.with-featured-image::after { background-color: rgba(0, 0, 0, 0.4); content: ""; bottom: 0; left: 0; right: 0; top: 0; position: absolute;
}

Adjust the 0.4 opacity as you like. Replace "xxx" with your actual page ID, which you can get by looking at the body tag in the browser source, or in the browser's address bar when editing the page.

Hi and thanks for this.

If I use the code as-is, my entire content-area is affected on the page.

I removed .hero-wrapper and .content-area in the first line, and got the effect I was looking for. But then I noticed if I expand a nested menu item, the header image sits over the drop down menus.

It's difficult to troubleshoot without seeing your site.

Did you replace page-id-xxx with your own page ID?

When you have the site up and running on a test server, I'd be glad to have a look.