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.

I have similar query, but I’m happy with 1080px.

Not being so bright, why have a 1600px header image when max width set to 1080px?

So how do I replace with a simple 1080px image in child?

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, could you please give some details/examples of code changes needed, since I am not very experienced in this.

I really do not want to change anything in the behaviour, just need to change the proportions in the header image. That is, I want to keep width 1600 but change height to 425.

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.

You can create your own threads to discuss your own issues.

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.

I am trying to use an image that is 1600 wide and 288 high. My problem is that when I use the image uploader in the header section of the theme, it still tries to crop my image to 230 high. Is there any way to override that? Like change its cropping dimension to a different height?

I’ve already tried @differentcharacter example to change the min-height to 288 but that doesn’t seem to work.

@dj please create your own thread: https://www.ads-software.com/support/theme/twentythirteen#postform

@andrew Nevins Forgive me, and I don’t mean to be rude, but my issue is pretty much the same issue that this thread was started on. Starting a new thread would be counterproductive since it would require someone to post the answers in more than one spot.

But I did manage to find a work around by finding and replacing the cropped image with the original image and changing the min-height to my required 288px.

See? One thread, and I got the answer I needed with no help from you. Next time, if I have a question that needs an answer, and nobody else has asked it, THEN I will create my own thread.

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.

Next time, if I have a question that needs an answer, and nobody else has asked it, THEN I will create my own thread.

Sorry, but that’s just not going to happen. See being mod watched.

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 !!

Having the same problem, trying to upload a 1600px wide header, but with a reduced height. Tried ‘a different character’s’ solution, and it works while I am editing the site. When i log out, view on different browsers, or view pages, the layout flashes and jumps from orig/template to my customised view. Is there a better way to reduce the height of the header ?

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