Creating a full width header in Default themes

Hello just looking for a few answers. I'm pretty familiar with CSS and HTML but still learning WP. So I have a few questions 1. What is the best way to create a full width header for a default theme like TwentyTwelve or TwentyThirteen? I understand some of the basics, i.e., create child theme and edit css in style.css. But having mixed results.
When I look at the theme TwentyThirteen it almost has a full width header (some space on both sides but very close). I looked at the themes default images Star.png and Diamond.png in the images/header files and notice that they come in a size that is 3200 x 420px however if you go into the dashboard of the theme and upload your own header you are asked for an image that is 1600x230px and if you upload an image that size it's not nearly as full as the Diamond or Star.png that ship with the theme. I do know that WP resizes and creates different sized images, but wondering how this works?

I downloaded Star.png and modified it, then uploaded it to the folder and named it Star.png and sure enough it works. But if I wanted to do this in a child theme would I need to create the folders for the header images in the child theme? Why the difference in image sizes? What function controls this and could I add another image with a name different than star or diamond.png which would allow you to choose it from the dashboard? Thanks

  • Jack Kitterhing
    • Code Norris

    Hi there @john,

    Hope you're well today, it would be recommend to create a child theme and modify the header.php to display the image you want.

    WordPress has a great guide on headers here :slight_smile:

    The difference is image size shouldn't be happening where, does the other image actually display in the full size or is it also cropped? The image uploaded from the admin then added as the header image should be the same size it is when I just tested in Twenty Thirteen :slight_smile:

    Do you have a link to the site in question?


    Kind Regards

  • john
    • Design Lord, Child of Thor

    If I go to the theme directory in cPanel and navigate to Twentythirteen/images/headers there are a few images in there star.png and diamond.png and if you download these they are 3200x640 px. But if you go to the dashboard there the suggested width and height is 1600x230 so I guess WP is resizing the image. So, I want a full width header using the twentythirteen and would like the content area to be a bit larger than 640px. Otherwise the twentythirteen theme is right for the site.

    thanks! I'll read the codex some more and see what I'm doing wrong. The site is here

    I've changed the header, but not sure how to break it out of the containing box that leaves a small gap on each side.

  • Ash
    • WordPress Hacker

    Hey @hector

    Thanks for posting in this thread, however it might be best if you open your own, even if the issues seem closely related. That way it will remain independent of this one and ensure it doesn't confuse issues here if this thread needs reopening again by the author.

    It also means the member who started this thread or anyone following it isn't inundated with post notifications each time we respond to each other. A lengthy thread could annoy the original poster.

    This also allows us to better track and answer your questions to ensure we don't miss any for you.

    You can start a new thread here:


Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.