Mobile Header Background Image Height

I tried these two bits of CSS without luck

@media(max-width: 768px) {
    body.logged-in .site-header {
        background-size: auto;}
}

@media(max-width: 768px) {
    body.logged-in .site-header {
        background-size: 100%;}
}

Hi there,

i tried logging in to your site - but the login page is not working - each submit is generating a JS error ?

REMOVED BY AUTHOR

Hi David:

I set up another user. Please try again.

REMOVED

This 'works' but all it does is expand the now out-of-focus image to fill the space.

@media(max-width: 768px) {
    body.logged-in .site-header {
    background-size: cover !important; 
    }
}

Hi there,

I believe it's the no-repeat center you have added here: https://www.screencast.com/t/p8hD2N7fHh

Let me know :)

Thanks, Tom

I removed no-repeat center but no change.

The logged-in header pattern is still larger and out of focus compared to the logged-out header image.

Hi John,

@media(max-width: 768px) {
    body.logged-in .site-header {
    background-size: cover !important; 
    }
}

The site don't seem to have to need this. The logged in header pattern seems to retain the full height even when I turn this css property off.

I've inspected your site to test.
https://share.getcloudapp.com/qGuNnjzj

Perhaps the logged-in pattern problem was caused by a cache and clearing the server and browser cache might solve the issue on your end.

Can you try removing the mentioned CSS code completely and try clearing browser cache to see what happens?

Hi Elvin,

Earlier today the logged in header image height was about at 50% which is why I put in that CSS.

Anyway, I did just as you suggested, and it worked. The logged-out and logged-in headers are now the same size.

Thank you so much for your help.

Nice one.

No problem. Always glad to be of any help.:)