Header Background Image on Storefront

@irreverance It looks like you have multiple things going on with your site and Storefront is actually being used at this url, correct? https://puppytutor.me/pet-supplies/

Background images can be tricky if you are wanting to show specific content. Typically the image needs to be larger than the container so that there is additional area outside of the container in case the container grows. This is the instance here. The header in Storefront is able to grow taller, so the background image is taller than the standard container.

It is possible to attempt to adjust the sizing of the background image via CSS, but it would be trying to hit a moving target, as screen widths for desktops can range from 800px to 1900px+ . If you are looking to showcase a specific image, it may be better to include it within the page itself.

Thanks. So, if I understand this correctly, I cannot use a custom image for the header background because if I do it will look terrible. Is that correct?

If so, I admit I don’t understand this because other themes don’t seem to have this problem.

@irreverance That is not what I am saying. Speaking as a former theme developer, background images are not the best way to display content you’d like your visitors to see. Background images are like wallpaper, they exist to make things a little less boring, but aren’t made the be the focal point. For web sites, background images are typically stretched and contorted depending on screen or container size, or are just repeating patterns.

Other themes may have certain containers that contain images and those containers are typically a fixed size or have fixed dimensions, so that helps with keeping any background images in them looking pleasant.

Hey Jesse. Thanks for getting back to me. Sorry about the previous cranky reply. It was a bad day. I appreciate the help.

@irreverance No worries ??

We never know the knowledge or experience level of those asking for help, so I wanted to make sure to explain more about best practices and why background images are sized the way they are.