background image to my Page Hero content ( on mobile )

Hi there,

Background images aren't responsive by nature (not a theme thing).

It's basically not possible to show the full image like that on mobile as the layout of the image is horizontal and the mobile screen is verticle.

In your case, I think the best solution would be to swap out the image specifically for mobile using this CSS:

@media (max-width: 768px) {
    .home .page-hero {
        background-image: url(https://MOBILE-IMAGE-URL-HERE);
    }
}

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

Ok I get It Leo, I am new at programming !! , Where I need to put that code ?? Thanks...

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

Thanks, Done !

No problem :)

Hi Leo,
1) I could apply a different image for mobile to the background header with help of your CSS code above for home page header but I lost the transparent background overlay in comparison with the desktop image. How can I get a similar transparent look as at the desktop image?
2) To prevent overlapping of text and background image for mobile I had to merge site header with background image und make some offset. Unfortunately the look of the desktop image on my Home page changed after merging too!I lost the bar above the header with the logo and the menu navigation moved from the bar to the header…Before the change the Home page header and the bar above looked similar as at my Blog page.How can I keep the origin design of the home desktop site while I am using simultaneously another image for mobile? Unfortunately there isn’t possibility in Site header to "merge on mobile only" but only "Merge on desktop only"..
3) I would like to have different images to the background for mobile on another headers too. I tried to adapt your code above for another headers concretely for Global Page Header (Blog) and Merged Site Header (About-Über mich) but without success. Could you show me the CSS code for this two other headers which works please?

Thanks!

My website:

https://klaviererlebnis.de/

Any chance you can open a new topic for your question?

Thanks :)