Archived topic
Background overlay supersedes background image in page-hero Element
1 reply · Started by jasmeet on June 15, 2019
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
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%);
}