[Resolved] Page Hero Gradient

Home Forums Support [Resolved] Page Hero Gradient

Home Forums Support Page Hero Gradient

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1634914
    gabrielvb1100

    Hello
    Is there a way to set up a gradient for the “Background Overlay ” > Background Color” in a post header type “Header” in the Elements section, but still use the featured image?
    I am trying this code

    
    .posthero {
    background: rgb(1,87,233);
    background: linear-gradient(180deg, rgba(1,87,233,0.5) 13%, rgba(50,64,154,0.5) 100%); 
    }
    

    but it is not taking it.
    Thx.

    #1635009
    Elvin
    Staff
    Customer Support

    Hi there,

    Can you link us to the page in question? So we could check if the selectors used matches.

    You can use the private information text field to provide the site details. Thank you. ๐Ÿ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #1635032
    gabrielvb1100

    Hello, Ive added the url to the site i am building

    #1635047
    Elvin
    Staff
    Customer Support

    Hello, Ive added the url to the site i am building

    Thank you.

    I’ve inspected the site and found that the class assigned to the Header Element doesn’t match with the CSS selector you’re using.

    Within the page-hero’s classlist you have postshero which doesn’t match .posthero you use on your CSS selector. https://share.getcloudapp.com/YEuXNg1B

    To fix this, change the class within the Header Element to match the CSS selector you’re using.

    A wise man once said:
    "Have you cleared your cache?"

    #1635054
    gabrielvb1100

    Hello, I did, but now the gradient seems to be overriding the featured image

    #1635096
    Elvin
    Staff
    Customer Support

    Try using this CSS instead:

    .postshero {
        position: relative;
    }
    
    .postshero:before {
        background: rgb(1,87,233);
        background: linear-gradient(180deg, rgba(1,87,233,0.5) 13%, rgba(50,64,154,0.5) 100%);
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }
    
    .postshero .inside-page-hero {
        z-index: 1;
        position: relative;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1635464
    gabrielvb1100

    Thank you very much for your help!
    It works very cool

    #1636373
    Elvin
    Staff
    Customer Support

    Nice one. glad it works for you. ๐Ÿ™‚

    A wise man once said:
    "Have you cleared your cache?"

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.