[Support request] Header transparent image overlay

Home Forums Support Header transparent image overlay

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

    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).

    Customer Support

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

    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:


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