Change Twenty Thirteen Header Image size

A few things to consider.

• Max width of this theme is 1080px, so the 960×295 header won’t look good in it, you have to scale it up to have a width of 1080px.
• Theme uses header image, set as fixed size 1600×230 in function, as background image in CSS streched to its max width of custom header width (1600px).

  .site-header {
  	background: url(<?php header_image(); ?>) no-repeat scroll top;
  	background-size: 1600px auto;
  }

• Child theme could override the size (1600×230) to something else, but it’s better to define the ‘flex-width’ and ‘flex-height’ to true.
• The fact of its use of background CSS renders the above pointless, since we will have to do thing in child theme stylesheet anyway, why not just do it all there ?

Suggestion: If you don’t care for the upload functionality, just click remove header image under Appearance > header, and do it all in child theme stylesheet.

Header image in Twentythirteen theme is not responsive and will never be, it’s implemented as background image for a div with fixed height. Even if the fixed height is taken out, still there is no CSS way (that I know of) to make a <div> responsive proportionally width AND height the same as <img> with responsive class.

So we can either do 1. or 2.

1. Overwrite header.php putting in a real <img> and adjust some CSS.
2. Do it in CSS only.

The 1. will give you full control. Depending on the type of image, the 2. will be more efficient because there is no need to create a child theme and all that.

You can change/remove the fixed height, remove bg image from .site-header and use it in .home-link instead. Changing the background position based on a few media queries making sure the important part is displayed. Or use it as image replacement for h1.site-title, if that’s a small size logo.

So it depends on the type of the image and what you want to do with it.

Paul, I’m another inexperienced user that would be grateful to see more details about implementing the first of the two options that you mentioned. Thank you.

For anyone still struggling – to change the header height you can add something like this in the child themes style.css document:

.site-header .home-link {
	min-height: 100px; /*or whatever height you want.*/
}

Hope this helps – it’s not the only solution, but it should do the job.

@dj please create your own thread: http://wordpress.org/support/theme/twentythirteen#postform

See? One thread, and I got the answer

Yeah, but you would have gotten the answer regardless of whether you posted in this thread. So, please, unless you are contributing towards the original poster’s solution, create your own thread to discuss your own issue.

If i`m not wrong, to do it you will need to apply a filter in your code, to change the twentythirteen_custom_header_setup, so when you load your page the function will register the older function before your new child theme function , and so you will need to filter that an call again to overwrite it !!

@jana-sebastian: As per the Forum Welcome, please post your own topic in the correct forum.