Make Header Image responsive

I have this same issue! I would love it if it could be responsive!

Thanks for the kinds words! I had made the assumptions that either the header image would be large (1600px x 200px) and should get cropped as necessary at narrower browser widths… or the image would be a small pattern that gets repeated to fill the full browser width (up to 1600px, though, as that is the max width of the entire theme). So that’s how its coded.

In looking into this further, I like the way the WordPress TwentyThirteen theme handles custom header images. They are responsive and it looks like it has a breakpoint at 768px that also adjusts the text size and height.

I’ll look into changing how this theme works. Originally I was worried about changing how headers work since there are over 20K downloads already, but I suspect that lots of folks would want it to work this way.

I wish I had a quick fix for you. You might be able to pull this off with some CSS, but in supporting the WordPress Customize capabilities, some of the header styling is added as inline CSS by the header.php and /inc/customer-header.php files.

I’ll marked this as closed, but am happy to keep the discussion going on it. Let me know if you have more thoughts on this and/or come up with some CSS to change the behavior.

Hi there, Understand.
I actually use a fix: I install REVOLUTION slider on all my sites. Then insert the header image into a slide and set up the slider in the Header.php – Looks good.
Just wanted to find a way to that without the slider, maybe in the future, thanks for your good work.

Hi,

This is indeed a much required feature. I had a hard time making the header completely fit uncropped in all devices. Please implement this feature.

I think there should be an option to have the image header smaller, as well…

As in – a logo option, maybe, aside from header background?

Great theme though. Thanks.

Hi, paulunstech. Automattic, the makers of WordPress, are in the process of rolling out a custom logo option. Its available on WordPress.com right now and I believe it will be added to the Jetpack plugin for self-hosted. I’m doing all I can to have the theme revolve around standards put forth by Automattic.

As an example, they just rolled out a Portfolio post type in Jetpack and I’ve built basic support for that into v1.4 which is currently under review. I’ve also updated the FAQ in v1.4 to show how to do a custom logo with just css.

.site-title a {
	background: url('https://yourdomain.com/images/logo.png') left top no-repeat;
	display: block;
	text-indent: -9999px;
	width: 100px;
	height: 100px;
}

I’d like to discuss the responsive header image situation again. Can someone please post a link to their site so I can see the header image and how the cropping looks bad? I just can’t think of how this would work if it were responsive and not have the site title and tagline bleed over the image and look terrible on smartphones.

This CSS code will make the header responsive, if you want to try it. If there is some use-case for this that I’m not thinking of, please let me know.

.custom-header-image {
background-position: top;
background-size: 100%;
background-repeat:no-repeat;
}

Hi Tim,

somehow this does not work for me. You might have a look: https://www.bodensee-schreinerei.de

Best Regards, Jens