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
Hey thanks for the quick reply!
Here’s one of the pages: 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);
}
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!
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
Thank you! Best free support I’ve had on here. I’m kicking you some money.
Respect!
Hi 7billionbuddhas,
I don’t have one, but no worries. Glad I could help and I really appreciate the review!
Best,
Nick
