Add Header Image to Theme

@ludwigkeck – The sizing of the header background image is a tricky one to describe because you should choose an image which is large enough for the largest screens. Then for screens that are long and thin (portrait) the image will be cropped left and right to fit; and for screens that are wide and not very high, the image will be cropped top and bottom to fit. So it’s important to choose a nondescript / abstract background image that doesn’t have text or a subject that could be cropped. Hope that helps!

With regards to decreasing the height of the image so that it only covers the logo, I’m afraid that by definition this will not be possible. The header area consists of the logo, title, description and menu and the header area in which the background resides is defined by these elements. Sorry! The answer is to make the items more visible on the background which can be achieved by …

• Choosing a suitable image (for example a darker image if your text is lighter)
• Styling your text so that it has an outline to throw them out of the background such as text-shadow: 0 0 3px black;
• Styling your text containers so they have a translucent / gradient fill as is done at the bottom of the cover image on Twenty Seventeen theme

We could take requests for options to achieve the latter two options above? ??

@wdwgolfer – Glad you found the right plugin ?? I’ve tried to answer the sizing of the image you mention above. With regards to the height of the header … this it is deliberate that the height only applies to the home page (as per Twenty Seventeen) … would you like a checkbox option to apply the height site-wide?

Hi Oliver,

Thanks for the clarifications.

You are correct vis-a-vis Twenty Seventeen and setting the header for non-home pages.

I suppose that a checkbox to allow for this setting to be site-wide would be helpful.

Thanks!

Thank you, Oliver, for your explanations. That really helps to allow me to get a good looking site.

You said, “We could take requests for options to achieve the latter two options above? ??”

Those options would be very useful. Both the shadow for the text and the gradient. Should a formally post a request for each of those?

OK guys, I’ll add the checkbox for site-wide header height and look at options to style header content to be more visible on a background. I’ll update this thread when it’s done.

Oliver

Hi Oliver,

I have tried out the header image and seem to have a scaling issue. The image I am using is 1200 x 300 px and it appears to be scaling to s larger size.

Do you have any advice on this?

You can see it on https://rickg.org

BTW, it would be also great to be able to change the justification of the text in the header as well as be able to bold it.

• This reply was modified 3 years, 11 months ago by cprgolds.

OK, so I’ll quote my message above because the size of the header is not cut-and-dry to one size. It’s actually the opposite of that …

The sizing of the header background image is a tricky one to describe because you should choose an image which is large enough for the largest screens. Then for screens that are long and thin (portrait) the image will be cropped left and right to fit; and for screens that are wide and not very high, the image will be cropped top and bottom to fit. So it’s important to choose a nondescript / abstract background image that doesn’t have text or a subject that could be cropped. Hope that helps!

In your case, your chosen image is 1,200 pixels wide but my laptop screen is 1,440 so the image is up-scaled accordingly to fit the area.

I would recommend using an image that is at least 1,600 pixels wide and as high as you are going to need for the largest screen that might view your height of header.

As for the justification of text in the header … can you elaborate as to whether you mean alignment and of what elements in the header precisely?

Thanks,

Oliver

Yes that does help. I was hoping the image would be scaled rather than cropped.

I am going the have to search for a new image. The image that wanted to reuse will no longer work.

The way the image was, the site title and site description looked much better right justified on the page. I still think the option or left, center (as it is now) or right justify is a worthy change.

I can’t decide what I want to do until I come up with a new image.

Hope that clarifies it.

Rick

Hi Rick,

It’s a reoccurring discussion / misconception that a background cover image can retain its aspect ratio on all screen sizes. The solution in Twenty Seventeen involved moving the site branding out of the header area!

By definition, it has to cover the area created by the content so the size can never be forced to be a specific size. In order to do this it is cropped.

So … if you want to have an image that isn’t cropped in the header you could take a look at this thread which found a way to solve the issue by using the Site Identity Logo instead.

“Justify” is how the text wraps onto a new line. I think you mean “align” so we’ll add an option to align the title and description in the header and update this thread when it’s done.

Oliver

@wdwgolfer Just pushed an update to include a checkbox in “Customizer – Header Options – Site Wide Header Height”.

Please confirm this works as required.

Thank you,

Oliver

@cprgolds Just pushed an update to include alignment of the title and description in the header.

Please confirm this works as required.

Thank you,

Oliver

Hi Oliver,

The update for the site wide header height is working as expected.

Thank you!

Marc

@domainsupport Title Alignment works PERFECTLY and as expected.

Thanks,

Rick

That’s good to know. Marking this as “resolved” now.

Oliver

Just to update this thread, the option to use featured images as the header image has been added to the premium version of this plugin. Hope that’s OK.

Oliver

@ludwigkeck Just to update you, the options to style header text shadow and a gradient overlay on the header image has been added to the premium version of this plugin. Hope that’s OK.

Oliver