Header size

  • Michelle


    Hi! I would like to change the size of the header, but keep the size of the body container at 960px.

    I have created a header image 2000×110 px.

    In my child theme I have in the style.css:

    #header {
    height: 110px;
    width: 2000px;

    And in the functions.php:

    function graphene_custom_header_width(){
    return 2000;
    function graphene_custom_header_height(){
    return 110;
    add_filter('graphene_header_image_width', 'graphene_custom_header_width');
    add_filter('graphene_header_image_height', 'graphene_custom_header_height');

    But what I get is the header starts at the edge of the container and overruns to the right, rather than being centred on the page and running off the edges equally.

    Here is a screenshot

    Can I do what I want? Any advice greatly appreciated. Thanks!


    Kenneth John Odle


    The header is part of the container div. You can make a larger header without making the content wider, but it will do exactly what you have noticed.

    The other, more pressing issue with this is that 2000px is a very wide header. Even assuming that you could get it centered (and there is probably a way, I’m sure), anyone with a smaller monitor will only see the center–the left and right sides will be cut off. I have a 1280×800 monitor, so I will only see the middle 64% of your header image.

    That said, if you really want to go this way, here’s a hack method you can try. You will need Photoshop or GIMP and you will need to know how to use a custom marquee size. This will probably work so long as your background is a solid color. (In your picture it looks white.)

    Create a background image that is 2000px wide and more than 110px high, and filled with the background that you want. Copy and paste your header image at the very top of the background image. Flatten, export as .jpg, then upload that and use as your background image.

    Using the custom marquee set to 960px x 110px, copy that center portion of your header out of your background image. (The bit with your name in the picture above.) Create a new file the size of the clipboard, paste, flatten, export as .jpg, then upload that and use as your header image.

    You can delete the code you mentioned above. You will need to set your background to “scroll” rather than “fixed.”

    A bit of work, I admit, and not a perfect solution to your issue, but the only way I know of to avoid the problem I mentioned.



    Kenneth, thanks for your reply and all the detail. I did previously do what you suggested, but my client doesn’t like the look of the lines at the edge of the container breaking up the full width header.

    I went for 2000px wide to make sure the header looks how the client wants even on the lovely big screens with >1900px resolution.

    Does anyone else have any ideas?

    Unfortunately this is a deal-breaker for my client and if I can’t get this to work I’ll have to use a different theme. Which would be a shame because I think this is an awesome theme!




    And ladies and gentlemen, that is why I love this theme!

    Thanks Syahir.

    What I ended up doing was creating a background with the header I wanted across the width, and set it to centred, scroll, no repeat.

    I removed the header image and left that blank.

    In the CSS I have:

    #container {

    margin-top: 110px;


    #header {

    position: absolute;

    left: 0;

    top: 0;


    And this is the result:

    Exactly what I wanted!!

    Thank you

Viewing 5 posts - 1 through 5 (of 5 total)

  • You must be logged in to reply to this topic.
Graphene Themes Forum