Header image height

[andym119]

If I upload a header image for a blog at a height of 250px, I have to put the following in the css for the full height to show on the blog:
.site-header { height:250px;}

However, I will not be putting a site-header height in the css as I am designing a multisite and I would like users to upload a header of any height and then for it to show automatically that height on their blog

I checked this on the wordpress twentyfourteen theme and it works like this by default, but not sure how to get the header to work like this on Genesis.

[Stefsull]

How are you inserting the image for the header? Is it an actual image sitting inside the <header class="site-header" ... or is it a background-image?

If it's a background-image, it isn't possible to have the header that contains it react to its size. If it's an image in your HTML/DOM, do you have a link where we can view the issue?

[andym119]

I'm developing my website locally.
If I create a genesis child theme and make no edits to it except the basics, I just go to admin/appearance/header to upload and insert the header image. The difference that I noticed between twentyfourteen and Genesis is when you right click and inspect element in the wordpress twentyfourteen theme, the header image is in the html as an image, so I can see why the height shows as it is.

But by inspecting the header image on Genesis, the image is not sitting inside the <header class=”site-header,
it appears in the right styles tab - (index):19 and says:

.custom-header .site-header {
background: url(my-web-url-for-header-image) no-repeat !important;
}

So I am not sure if there is any alternative solutions to get the Genesis header to work the same as the twentyfourteen theme where the height of the header will be displayed as the height it was inserted as. Otherwise I will need to install a custom css plugin and ask users to change the site-header height in the css to reflect the header image they inserted.

[Stefsull]

Right. Since it's a background image, you'll have to use min-height: your-height-px ...

I imagine the reasoning is because the Genesis theme is responsive. And responsiveness is much easier to achieve with a background-image (plus, you can serve retina images through your media queries as well as serving a much smaller image to mobile devices).

There might be a way to change whether Genesis inserts it as a background or foreground image, via hooks or something. But it might affect your layout. I dunno.

[andym119]

Good point, I'll use min-height. I'm still trying to figure it out but starting to think it can't be done as I would like. I saw a similar question on another forum but doesn't seem there is a solution for it. Nevertheless, I'll keep this topic unresolved for while.

[andym119]

I have just worked out a solution to do this. It also allows users to select the height of the header, link the header image back to my homepage and allows the image to respond in ratio as the screen gets smaller which saves me asking other questions on the forum 🙂

I'll keep this as a reference if anyone wants to do the same.

I removed the header theme support and registered a new widget area and hooked it in genesis_header. I then installed a plugin called image widget, moved the image widget in the new widget area and I can now have any height show automatically (the whole image will show so the height depends on the width and width-height ratio) and add a link for it. This header image is also now an img tag in the html and so responds bit by bit in ratio as the screen gets smaller like the other images do which I much prefer.

The site title and description now appears above the header image but you can reposition or remove with css.

The header is now perfect for my site, does anyone see any issues with this setup ?

[Author]

Posts