Largest possible header

To start with, give #page a width of 980px, equal to your header, then see how you like it. In style.css, line 163:

#page {
width: 980px; //old value was 780px
margin: 0px auto;
}

Thanks for your prompt response!

I went into the style.css file as you said, changed the width to 980px, and hit update file, but nothing seems to have happened. Did I miss a step?

One small clarification – do I actually need to include “//old value was 780px” in the code? I didn’t think so, so on the first try I excluded it, but then when nothing seemed to change, so I tried with. That didn’t seem to change anything either, but I must be overlooking something. Your insight would be appreciated, thanks again!

Did you refresh your browser (F5)? You don’t need the comment about the old value.

Thanks again. Yes, I did refresh.

I guess main issue with the header isn’t the width, but the height. (I have a much bigger image I’d like to use) It’s wide enough now, but I’d like it to be as tall as possible. I suspect that’s also a matter of editing in the style.css?

In addition to making the header taller, I was wondering if there’s a way to get it more centered? In Safari and Google Chrome, it seems a bit too far over to the right: https://www.chaojishengnu.com. And the menu bar ends before the header does. If there’s a way to get those two aligned, this might start to look semi-presentable! ??

Thanks again for your help and patience.

In Chrome I edited the width as I described above and everything centered.

If you don’t care about responsive web design then just add a height: xxx declaration (where xxx is the actual height of your image plus a trailing px). If you want the image to resize on smaller screens (responsive) then I suggest you examine the Twenty Eleven theme to see how they did it.

Are you using Developer Tools in your browser to trace where styles are coming from?

For now, I don’t care about it being responsive, but I’m not clear on where to add the height declaration. Would that be in style.css, under *THE HEADER* ? (Does something like 400px sound reasonable?)

No, I’m not using Developer Tools in the browser – should I be? I’m quite new at this, so trying to keep it as simple as possible.

Thanks again!

You should check your theme options under Appearance, see if the header dimensions are set there. Your header css is definitely being inserted outside the style.css file.

As for the height dimension, experiment until you get the look you like. But don’t use css to crop or stretch your image, do that in an appropriate program, then include those dimensions in your css.

So, create your header image (say, 980px wide by 350px high). Change the css in your Appearance > Header (or wherever it is) to reflect those new dimension. See if you like it.

And don’t forget to edit your style.css file, line 163, so #page { width: 980px;}.