[Support request] Header transparent image overlay

Home Forums Support Header transparent image overlay

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1082654
    Len

    I want a background image with a colour gradient overlay for the website header.
    Setting a background image is OK, also setting a colour is OK.
    But how do I get a combination of both together, with the colour overlaying the image?
    Is there a way to have a gradient rather than just one colour, again as an overlay?
    I am sure I can handle this with CSS, but would rather be able to do it in the customiser if possible.
    (Please Note: no website as such, its in a test area as new to generatepress so trying things out).

    #1082843
    David
    Staff
    Customer Support
    #1082904
    Len

    The site header, just looking at the obvious functions in the customiser, not looked at what elements are yet.

    #1082922
    David
    Staff
    Customer Support

    Either one would require some CSS to add the gradient overlay.
    Add the background image to the Header and then add this CSS:

    .site-header, .inside-header {
        position: relative;
    }
    
    .site-header:before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(255, 255, 255,0);
        background: linear-gradient(174deg, rgba(255, 255, 255, 0) 30%, rgba(0, 212, 255, 1) 100%);
    }

    Adjust the linear-gradient to suit.
    This site is great for that:

    https://cssgradient.io

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