Header Background not working on mobile

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know :)

Yeah no problem

You have the mobile header option activated so the default header is hidden on mobile:
https://docs.generatepress.com/article/mobile-header/

Try disabling the option first.

That background image won't work very well on mobile though.

Can you try adding that as the site logo and see if works better?
https://docs.generatepress.com/article/adding-header-logo/

Let me know :)

Awesome thank you! Is there a way to have a different header image for mobile that is more mobile friendly?

Are you referring to a different logo image or background image?

Background image

https://www.harpersbazaar.com/

This is what I'm looking to do

You can apply a mobile-specific background image with this CSS:

@media (max-width: 768px) {
    .site-header {
        background-image: url(https://MOBILE_IMAGE_URL);
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Thank you :) The Img URL isn't working in the code

@media (max-width: 768px) {
.site-header {
background-image: url(https://relaxingdecor.com/wp-content/uploads/2020/09/c2f1e4208a0b1acd0f7427ab54bc4ed8.jpg);
}
}

Looks like it's working for me?
https://www.screencast.com/t/Xssfjh9p3M

Actually I got it thank you!

No problem :)