Can header image be fixed

Hi @jennifercross,

Thank you for your question.

My guess you’d like to show particular area of header image on smaller screen. Perhaps it is the ‘2021 Winner’ with circle. If so, I’d recommend this CSS code to apply to your site’s Additional CSS (under Appearance > Customize).

@media only screen and (max-width: 1024px) {
    .site-header {
        background-image: url(https://businessowl.co.uk/wp-content/uploads/2021/09/Website-header-inc-winner-badge.png);
        background-position: center center !important;
    }
    .site-header .header-image {
        opacity: 0;
    }
}

If the image doesn’t show up in proper position, maybe you’d design second image to replace the current background image.

Regards,
Kharis

Hi Kharis,

Thanks for getting back to me. No I’m actually wanting to ensure that whichever device the header is viewed on, it stays at the same scale, rather than changing to fit the screen. So I’d like to ‘lock’ the image rather than have it stretch to fit?

Thanks,
Jen

Hi Kharis,

Are you able to help further with this please?

I’m trying to ensure that the header stays the same pixel size and doesn’t scale out of proportion – it currently moves out of proportion on larger screen sizes.

Thanks,
Jen

Hi @jennifercross,

I am sorry for the long delay.

Seem likely you’re getting design challenges with CSS code for image on particular screen size. If you can provide a design showing how the image on header area should appear, it’ll help me a lot.

Regards,
Kharis

Hi Kharis,

Thanks for your reply. You could look at these two websites to see what I mean. This first one, as you expand or decrease the screen size, the main image area stays the same, so you don’t lose any of the text or images as the screen size gets bigger:
https://www.defariadean.com/

The next one is different and as the screen size gets bigger, the images get bigger as well:
https://www.defariadean.com/

I’d like to replicate the first option, so that the whole of the image is seen regardless of how big the screen size gets, in other words to fix/lock the image so I can be confident it is seen on any screen size.

I hope this makes more sense, but let me know if not!

Thanks,
Jen

Hi Kharis,

Sorry this is the link for the second website i referred to:
https://effectivehome.co.uk/

Thanks,
Jen

I checked all sites you’re referring. Looks like they have multiple layers on the hero section you’d like to replicate. For example, effectivehome[dot]co[dot]uk’smain image is in a separate layer as shown in my web bowser’s source code viewer.

So you’ll need different approach to replace the current header image handled by the theme. Adding an external slider script/plugin may work best for you. I’d suggest checking this plugin for your reference.

Regards,
Kharis