Need help? Check out our Support site, then

Twenty Eleven Theme: Change custom header with CSS

  1. Hi,

    I used the following to change the height of my custom header image in the Twenty Eleven theme (found in a helpful reply by thesacredpath here).

    #branding img {<br /> height:149;<br /> width:100%;<br /> margin-bottom: -7px;<br /> }

    I know that the custom header upload wizard forces you to crop anything that isn't 1000x288, so I understand I need to insert my preferred header image with CSS into the #branding img section. However, I can't figure out how to do that. I've tried inserting


    but that doesn't seem to work. Here's the link to my site:

    I appreciate any help.


    The blog I need help with is

  2. There are a number of ways to do this, but give this a try.

    #branding {
    background: url("") no-repeat scroll 0 0 transparent;
    height: 149px;
    #branding img {
    display: none;
    #access {
    margin-top: 149px;
  3. That worked perfectly. Thank you so much for the help!

  4. You are welcome.

  5. alwayswellwithin


    This code didn't work for me, but I suspect - after looking at this blog - that I am trying to do something a little different. Which is just to add a custom header that is 1000 x 240 px Here's the url for the file.

    Can you tell me how to do this? Thanks for your help! Sandra

  6. Hi Sandra,

    Try adding this into your custom CSS:

    #branding {height:240;}

    Hopefully that works... if not let me know.


  7. alwayswellwithin

    That didn't work for me, so I'm confused! Any additional ideas would be appreciated. I'm just trying to load a custom header that's 240 px, not trying to remove the the site title. Thanks loads!

  8. Sandra, give this a try. It works in Firebug. Due to the white area at the top, and the fact your image is a different height, the height of #branding and the top margin for #access have to be adjusted differently. If you want a 1px white reveal at the bottom of your image, set #access top margin to 241px. I think it looks better with that 1px of white there.

    #branding {
    background: url("") no-repeat scroll center bottom transparent;
    height: 400px;
    #branding img {
    display: none;
    #access {
    margin-top: 240px;
  9. alwayswellwithin

    Thanks! I will try that. In the meantime, I've been messing around trying different approaches. I would like to remove the extra background space at the top, so I'll ask that in a different threat.

  10. alwayswellwithin

    Thanks, that worked out perfectly, Sacred Path.

  11. You are welcome and that reminds me I owe you an email. :-)

Topic Closed

This topic has been closed to new replies.

About this Topic