[Support request] overlay behind text on page header

[Mark]

Hi, I am using the full screen image on the page header. I would like to have a background overlay just behind the text – not for the whole image.

Is there a way to do this from settings? Or do I need to use CSS? If so, could you tell me the CSS needed?

Thanks,

Mark

[David]

Hi Mark,

the content sits inside this div .inside-page-header – the size of which is defined by the page header padding, so you can style it like so:

.generate-page-header .inside-page-header {
    background-color: rgba(255,255,255,0.5);
}

If you want more control over it then you could wrap your content in a div and style that, something like this:

<div class="my-class">
    HTML Markup
</div>

.my-class {
    display: inline-block; /* Will fit to size of content */
    padding:  10px;
    box-sizing: border-box;
    background-color: rgba(255,255,255,0.5);
}

[Mark]

Hi David,

Thanks for your response. One question – how do you differentiate which page you are on? So, for example, I might have text on the home page, but also some different text on some other pages?

Mark

[Mark]

David,

And btw, how do I add HTML to the text? I know how to add CSS.

Mark

[Mark]

Sorry, I meant “add HTML to the page.”

[Leo]

If you want to re-use the page hero but with different texts on different pages, template tags is the easiest solution:
https://docs.generatepress.com/article/header-element-template-tags/#custom_field-name

You need to use the HTML editor to add that.

Or simply copy and paste as it is in the page hero content box.

[Author]

Posts