Home Forums Cordero Sticky header with background image

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #11605
    lisia
    Participant

    Hello!

    I would like to have the sticky header with a background image (my header image) instead of the choosen color in the customizer. Do you have an additional code for this?

    I like Cordero very much!!!

    Best regards, lisia

    #11606
    lisia
    Participant

    Sorry … I see, it is the background image on the pages, but I also want to have this behaviour also on the start-site.

    lisia

    • This reply was modified 1 week, 3 days ago by lisia.
    #11608
    lisia
    Participant

    I can explain it better now: I want to have the background image on the scrolled header also on sites, where I use the template “transparent header”. In the moment, there i have the color, which can be adjusted in the customizer.

    Kind regards, lisia

    #11609
    lisia
    Participant

    I found part 1 of a solution with the following code:

    #masthead.scrolled{
    background-image: url(http://….)
    }

    But I also need the gradient overlay … either the gradient overlay always or never.

    BR, lisia

    #11610
    lisia
    Participant

    Maybe I have found the solution by myself:

    In the additional code I set the url of the header

    #masthead.scrolled{
    background-image: url(http://……..jpg)
    }

    Then I edited the page with the transparent header, the cover block – and there I could adjust the overlay.

    Is my solution ok or is there a better way?

    Best regards, lisia

    #11615
    Andy
    Keymaster

    I would like to have the sticky header with a background image (my header image) instead of the choosen color in the customizer. Do you have an additional code for this?

    You could add a header image in ‘Customize’ > ‘Header Image’

    and then to make the image only appear when scrolling down the page add this ‘Additional CSS’:

    #masthead:not(.scrolled) {
        background-image: none !important;
    }
    #11616
    Andy
    Keymaster

    Yes, the CSS code you wrote is another way of doing the same thing.

    About the overlay, I’m not sure whether you want the overlay on the cover block or on the header image, as they are two different things.

    The cover block overlay is easy to do as there are options in the block editor for this.

    #11619
    Andy
    Keymaster

    To give the scrolled header image a semi-transparent color overlay, us this CSS:

    #masthead.scrolled:before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;
        content: "";
        background: red;
        opacity: 0.5;
    }
    #11624
    lisia
    Participant

    Because the overlay in the original code and also with your additional code is over the logo, I have decided, not to use any overlay at all. I prepare my images before I use them.

    Thank you nevertheless for the code. Kind regards, lisia

    #11623
    lisia
    Participant

    Hello Andy!

    Thank you for so many answers. This code

    #masthead:not(.scrolled) {
    background-image: none !important;
    }

    doesn’t solve my problem. I want the header with the image everywhere, but I don’t want the plain coloured header in the transparent-header-template like the following picture (picture1) shows.

    But it doesn’t matter – my solution is working (picture2).

    Best regards, lisia

     

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