How to change the header Media Image for mobile different and desktop different

How to change the header Media Image for mobile different and desktop different?

Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

@media (max-width: 1023px) {
    #wp-custom-header img {
        visibility: hidden;
    }

    #wp-custom-header {
        background-image: url("https://example.com/");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
}

Just replace https://example.com/ in the code above with a link to the background image that you want to use for mobile devices (you can find it in your Media Library section). Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

thank you very much.

I tried it but it’s not showing well.

I have two same pictures, one is cropped smaller and we use it for the desktop, the other is not cropped we use it for the mobile. When I put the link of the smaller image in the CSS and the header chosen bigger it works, but when I choose the smaller Image for the header and the lager in the css code it doesnt work.

Hello,

Can you please provide a link to your website in order to let me check it?

Kind Regards, Roman.
aThemes Support

sure:

https://www.hometale.net

Hello, try to use this CSS code instead of previous:

@media (max-width: 1023px) {
    #wp-custom-header img {
        visibility: hidden;
    }

    #wp-custom-header {
        background-image: url("https://example.com/");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 90vw;
    }
}

Kind Regards, Roman.
aThemes Support