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

Home Forums Support Background overlay supersedes background image in page-hero Element

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #930716
    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

    #930725
    David
    Staff
    Customer Support

    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%);
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.