Storefront theme – header image size

Hey,

That is the correct recommended size. Allow me to explain;

Storefront sets the header image as a background – that’s why content like your logo / secondary menu appears on top of it. That means it will resize based on the browser window. If you open your site and resize the browser you’ll see this in effect. By using an image that is 1950×500 you ensure that the image will not repeat on very large screens.

It’s best to treat this image as a background for best results. IE do not add any important text or content to it, instead use the available widget regions to do that.

Thanks

James
Designer @ Automattic

Hi James.
I’m sure you know what you’re talking about but I just don’t get this. My site is not ready to be public yet so I have quickly set up another and put the same size header image into it. here is the url for the second site:
https://storefront-trial-co-uk.stackstaging.com/sample-page/
Regarding your advice about screen size, I have viewed this on a 24 inch screen, a 14 inch screen and an ipad. Same problem on all.
Your help would be appreciated. TIA

Hey @learnlite. Having an important design element on the edge/corners is always going to be quite tricky to set up in the sense that this means that you’d need to calculation the height based on the width. This would be possible with some custom JS and CSS, but I wouldn’t really advise doing so.

Here’s some CSS that can get you started. Under Customize > Additional CSS, you can add the following code:
?

/*----
Heigth header
----*/

/* Make sure the covering is happening */

.site-header {
    background-size: cover;
}

/* Make sure the design looks okay on desktop */

@media (min-width: 768px) { 
    .site-header {
        min-height: 500px;
        padding-top: 400px;
    }
}

You’ll see now, that when you look at 1950px width, it’ll look perfect, but as soon as you go slightly wider or less wide, the corners will look a bit odd. For visual purposes and accessibility however, it’s better to have a fixed height and not jump around with header heights too much.
?
If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

• This reply was modified 6 years, 3 months ago by Job a11n.

Thank you. I’ll give that a try. I know a little css – perhaps one day I’ll learn a bit more.

@learnlite. All the best with that. There are some really good CSS courses on teamtreehouse.com (that’s where I learnt a lot of my skills).

I’ll mark this thread as resolved now.

I have read and tried every post I can find on how to change the height of my header image, but nothing has worked. However, it did change the height off all the other images in my theme and now I can not change them back. (Using the Ascension Theme) I have looked through 500 lines of code for the image title with no luck. Where could the code for the header image be located. I do have experience with web design but very new to wordpress, which I am finding very difficult to use. Thank you for your help.