[Support request] Set an image in the header

[Mikhail]

It is impossible to adjust the background image in the cap, so that it both on the full version and on the mobile reflected without problems. If all is OK, then your mobile looks truncated. Can you give me advice as what settings need to be applied to the image in the header and what should be the size of the image to, for example, it turned out this way on this page – bptrip.ru
my page – hotdozen.ru

[Leo]

Hi there,

Background images are not responsive by nature.

Couple solutions to try for your case:

– Set the header padding to how you want it to look on desktop in the customizer:
https://docs.generatepress.com/article/header-padding/

Then reset it in mobile mode using this CSS:

@media (max-width: 768px) {
    .site-header {
        padding: 10px 0 30px 0;
    }
}

– Or switch out the background image specific for mobile:

@media (max-width: 768px) {
    .site-header {
        background-image: url('https://MOBILE-BACKGROUND-IMAGE-URL')
    }
}

Let me know if this helps.

[Author]

Posts