Title: Custom content overlay
Last modified: August 30, 2016

---

# Custom content overlay

 *  Resolved [7billionbuddhas](https://wordpress.org/support/users/7billionbuddhas/)
 * (@7billionbuddhas)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/custom-content-overlay-1/)
 * Someone previously asked about how to make the custom content overlay on the 
   image, but the they never followed up.
 * I’d like to have the custom content area overlay on the image. I’ve tried with
   CSS, but it’s not responding to z-index styling. Can you give me some direction
   on this? Also, I want to make sure I hit up all the appropriate style elements
   to make it responsive as well.
 * Thanks!
 * [https://wordpress.org/plugins/genesis-custom-headers/](https://wordpress.org/plugins/genesis-custom-headers/)

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

 *  Plugin Author [Nick Diego](https://wordpress.org/support/users/ndiego/)
 * (@ndiego)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/custom-content-overlay-1/#post-6722838)
 * Hi 7billionbuddhas,
 * Can you give me a bit more information? Is the image already on the page and 
   you are trying to put some custom content on top of it? Either way, a link to
   what you have so far would be really helpful and then I can go take a look. Some
   times the approach depends on your setup and the theme you are using.
 * Thanks,
    Nick
 *  Thread Starter [7billionbuddhas](https://wordpress.org/support/users/7billionbuddhas/)
 * (@7billionbuddhas)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/custom-content-overlay-1/#post-6722902)
 * Hey thanks for the quick reply!
    Here’s one of the pages: [http://medversant.cindysalmon.com/health-plans-payers/](http://medversant.cindysalmon.com/health-plans-payers/)
 * I almost have it with the following custom CSS. I need to get the content box
   to line up with the bottom of the image. I know this is more a CSS thing, then
   your plugin, but if you have any other ideas, I’m all ears. 🙂
 * .gch-header-content {
    background: rgba(180,180,180,0.5); position: absolute;
   padding: 40px 100px; width: 100%; color: #fff; bottom: 100px; text-shadow: 2px
   2px 7px rgba(50, 50, 50, 1); }
 *  Thread Starter [7billionbuddhas](https://wordpress.org/support/users/7billionbuddhas/)
 * (@7billionbuddhas)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/custom-content-overlay-1/#post-6722903)
 * Can you look at it in Chrome and FF? FF has issues that probably are related 
   to the plugin. Sizing of the background image is off and so is the placement 
   of the custom content.
    THANKS!
 *  Plugin Author [Nick Diego](https://wordpress.org/support/users/ndiego/)
 * (@ndiego)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/custom-content-overlay-1/#post-6722919)
 * Hi 7billionbuddhas,
 * The plugin adds virtually no styling so there are no inherent issues there. I
   was able to resolve the issue on my end with a quick CSS fix. Your `position:
   absolute` is not working properly for two reasons.
 * First you need to apply `position:relative` to the parent div which in this case
   is `gcc-header-inner`. Then to get the caption to move to the bottom of the image,
   on `gch-header-content` add `bottom:0`. I have tested this in Firefox, Safari,
   and Chrome and it seems to do the trick. You will likely have to add some additional
   tweaks for mobile styles.
 * Also I did notice on Firefox that the image is overflowing the page. I am not
   sure this was intended, but if you add `.gch-header-image-inner img { width 100%}`
   it resolves the issue.
 * Let me know if I can do anything else to help.
 * Nick
 *  Thread Starter [7billionbuddhas](https://wordpress.org/support/users/7billionbuddhas/)
 * (@7billionbuddhas)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/custom-content-overlay-1/#post-6722939)
 * Thank you! Best free support I’ve had on here. I’m kicking you some money.
    Respect!
 *  Thread Starter [7billionbuddhas](https://wordpress.org/support/users/7billionbuddhas/)
 * (@7billionbuddhas)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/custom-content-overlay-1/#post-6722940)
 * Donate button for you?
 *  Plugin Author [Nick Diego](https://wordpress.org/support/users/ndiego/)
 * (@ndiego)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/custom-content-overlay-1/#post-6722967)
 * Hi 7billionbuddhas,
 * I don’t have one, but no worries. Glad I could help and I really appreciate the
   review!
 * Best,
    Nick

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

The topic ‘Custom content overlay’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/genesis-custom-headers_23282d.svg)
 * [Genesis Custom Headers](https://wordpress.org/plugins/genesis-custom-headers/)
 * [Support Threads](https://wordpress.org/support/plugin/genesis-custom-headers/)
 * [Active Topics](https://wordpress.org/support/plugin/genesis-custom-headers/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/genesis-custom-headers/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/genesis-custom-headers/reviews/)

 * 7 replies
 * 2 participants
 * Last reply from: [Nick Diego](https://wordpress.org/support/users/ndiego/)
 * Last activity: [10 years, 6 months ago](https://wordpress.org/support/topic/custom-content-overlay-1/#post-6722967)
 * Status: resolved