Title: Adding Opacity Overlay in Goran Header
Last modified: August 31, 2016

---

# Adding Opacity Overlay in Goran Header

 *  Resolved [ESSBEEAY](https://wordpress.org/support/users/essbeeay/)
 * (@essbeeay)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/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!

Viewing 9 replies - 1 through 9 (of 9 total)

 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/adding-opacity-overlay-in-goran-header/#post-7155461)
 * 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.
 *  Thread Starter [ESSBEEAY](https://wordpress.org/support/users/essbeeay/)
 * (@essbeeay)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/adding-opacity-overlay-in-goran-header/#post-7155550)
 * 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.
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/adding-opacity-overlay-in-goran-header/#post-7155559)
 * 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.
 *  Thread Starter [ESSBEEAY](https://wordpress.org/support/users/essbeeay/)
 * (@essbeeay)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/adding-opacity-overlay-in-goran-header/#post-7155560)
 * Oh, I forgot to mention I’ve uploaded to a test server.
 * I’ve created a page with the suggested code for you to take a look.
 * Thanks!
 * [http://www.100hands.org/scottys/header-test/](http://www.100hands.org/scottys/header-test/)
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/adding-opacity-overlay-in-goran-header/#post-7155563)
 * That’s very helpful, thanks!
 * Could you try adding this to your custom CSS as well:
 *     ```
       @media screen and (min-width: 1230px) {
         body.hero-image .hero.with-featured-image {
           padding-top: 312px;
           position: relative;
         }
       }
       ```
   
 *  Thread Starter [ESSBEEAY](https://wordpress.org/support/users/essbeeay/)
 * (@essbeeay)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/adding-opacity-overlay-in-goran-header/#post-7155606)
 * Perfect!!
 * Thanks so much.
 *  Moderator [Kathryn Presner](https://wordpress.org/support/users/zoonini/)
 * (@zoonini)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/adding-opacity-overlay-in-goran-header/#post-7155607)
 * You’re welcome!
 *  Thread Starter [ESSBEEAY](https://wordpress.org/support/users/essbeeay/)
 * (@essbeeay)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/adding-opacity-overlay-in-goran-header/#post-7155621)
 * Hi again,
 * After marking this resolved, I realize I still have a problem with this task.
   When I reduce my media screen down from 1230px, the opacity change affects the
   entire content area.
    [http://www.100hands.org/scottys/scottys-construction/projects/](http://www.100hands.org/scottys/scottys-construction/projects/)
 * Is it possible to have the opacity change work across all widths, as I really
   love the way the text pops this way?
 * Thank you,
    Scott
 *  Thread Starter [ESSBEEAY](https://wordpress.org/support/users/essbeeay/)
 * (@essbeeay)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/adding-opacity-overlay-in-goran-header/#post-7155622)
 * Sorry, Will post a new question and keep this resolved.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Adding Opacity Overlay in Goran Header’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/goran/1.2.5/screenshot.png)
 * Goran
 * [Support Threads](https://wordpress.org/support/theme/goran/)
 * [Active Topics](https://wordpress.org/support/theme/goran/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/goran/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/goran/reviews/)

## Tags

 * [goran theme](https://wordpress.org/support/topic-tag/goran-theme/)

 * 9 replies
 * 2 participants
 * Last reply from: [ESSBEEAY](https://wordpress.org/support/users/essbeeay/)
 * Last activity: [10 years, 3 months ago](https://wordpress.org/support/topic/adding-opacity-overlay-in-goran-header/#post-7155622)
 * Status: resolved