[Resolved] How can I set a background gradient for Element Header Image

Home Forums Support [Resolved] How can I set a background gradient for Element Header Image

Home Forums Support How can I set a background gradient for Element Header Image

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1581320
    Sam

    I am using an element header as site wide header (other than on my front page which is using GP block and a zero header element)

    I would like to be able to add a gradient to the image used in the (site) element header – but can’t seem to figure out how to get to work

    The gradient is I would like is

    linear-gradient(180deg, rgba(0,0,0,1) 20%, rgba(20,70,160,1) 82%);

    With the image Opacity set to 0.7

    This would then style my site header in the same colour config as my front page

    https://www.staging.watersportswhiz.com/
    https://www.staging.watersportswhiz.com/boats-and-boards/

    #1581730
    David
    Staff
    Customer Support

    Hi there,

    it cannot be done exactly in the Header Element as you have it set up in your Block Element.
    In your Block Element the Gradient is the CSS Background and the Image ( set to Pseudo Element ) overlays the background.

    Whereas in a Header Element the CSS Background is the image and any CSS such as this would overlay the Image:

    .page-hero,
    .inside-page-hero {
        position: relative;
    }
    .page-hero:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: /* add your linear gradient here */
    }

    This would give completely different results.
    The workaround would be to switch the Block elements settings around:

    1. set the Background Image to Element – leaving the opacity as 1
    2. Set the Z-index for the inner container to 1.
    3. Then set the Gradient to a pseudo element.
    This will overlay the Image, so the Gradient will need to be transparent.

    Then use the above CSS with the same linear gradient.

    #1582511
    Sam

    thanks David

    #1582716
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.