[Support request] Background overlay supersedes background image in page-hero Element

[jasmeet]

Hello

Kindly guide as to how to have exact background overlay with transparency gradient like seen here for single post template – https://designmodo.com/code-responsive-email-template/

as I tried enabling background overlay however the same supersedes the actual featured image like seen through developer inspector – https://cl.ly/15ec42712ec9 due to which featured image isnt seen at all then

Or, You may kindly let me know as to how to add extra div which would allow the background overlay to be placed by way of absolute positioning like seen in designmodo (site link) above specific blog post

[David]

Hi there,

for the standard color overlay you have to make sure that the color you have selected has a lower opacity ( transparency ) set in the header element.

To add a gradient overlay would require custom CSS like this:

.page-hero,
.inside-page-hero {
    position: relative;
}

.page-hero:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 50%, rgba(100, 167, 180, 0.5) 100%);
}

[Author]

Posts