Header Image Resizing

[BHollowell]

Hello, I just installed this theme recently and so far I really enjoy it. The only issue I’ve found so far is that the header image is different on Desktop vs Mobile. It seems like the image is not being resized on Mobile. My site URL is https://elkhartpogo.com/

Any assistance would be great!

[Andy]

Hi,

I’ve looked at your site and the header image is resizing correctly on different screen sizes.

If you want the full width of the header background image to always be visible you can add this CSS to Appearance > Customize > Additional CSS:

.entry-header.with-image,
.archive-header.with-image {
    background-size: contain;
}

Please note that the background has to completely fill the header area so using this additional CSS will make the image stretch vertically on narrow width screens such as mobile.

[BHollowell]

Interesting. What you’re suggesting (showing the full image) is what I was looking for, but it did repeat vertically on mobile due to the size of the text and menu. Is this intended behavior instead of stretching the single image?

EDIT: Added image for reference

• This reply was modified 4 years, 9 months ago by BHollowell.
• This reply was modified 4 years, 9 months ago by BHollowell.
• This reply was modified 4 years, 9 months ago by BHollowell.
• This reply was modified 4 years, 9 months ago by BHollowell.
• This reply was modified 4 years, 9 months ago by Andy.

[Andy]

Sorry my mistake, I should have said it would repeat.

Because it is a background image that is intended to fill the header area, it is not really suitable for background images where you need the whole of the image to be visible at all times.

[Author]

Posts