Need help? Check out our Support site, then


Adjusting stretched header in Twenty Eleven

  1. My blog is here at themabelkwong.wordpress.com and I've got the CSS custom upgrade. I'm using the Twenty Eleven theme.

    I've widened the page / one-column width of my blog and widened the primary column and sidebar width too.

    As you can see, the header image is stretched. Is there a way to unstretch it? Or do I have to upload another header that is wider in length?

    Here is some of my code I put in the CSS box:

    #page {
    margin:2em auto;
    max-width:1100px;
    }

    #primary {
    margin:0 -56.4% 0 0;
    }

    #content {
    margin:0 34% 0 7.6%;
    }

    #secondary {
    float:right;
    margin-right:3.6%;
    width:23.8%;
    }

    Any help will be much appreciated. Thanks!

    The blog I need help with is themabelkwong.wordpress.com.

  2. Your header image doesn't look stretched to me, but yes, you'll have to upload an image that is the correct width and height of the container (1100 px by 241, I believe) in order to make it not stretch.
    Good luck!

  3. Thanks for this! I've tried uploading a header of width 1100px, but it still looks stretched to me.

    I've also tried adjusting the header using CSS with this code but it still is stretched:

    #branding > a {
    display: block;
    width: 1100px;
    height: 288px;
    background: url no-repeat;
    }

    Any other ideas?

  4. It looks like your image is 1000px by 288px, instead of 1100px. Leave your CSS as it is, but re-load in a photo at 1100px - and make sure to delete the old one and re-link to the new photo.
    See if that helps at all.
    Good luck!
    -Z

  5. Thanks a lot!

    I uploaded a photo at 1100px by 288px in my library and used it as my
    default header under Appearances > Header. It still looks stretched and slightly pixelated.

    I then set the header image as one of the default pictures. Then I added in this piece of CSS (image is 1100px by 288px) and the header is still stretched:

    #branding {
    width: 1100px;
    height: 288px;
    background: transparent url(http://themabelkwong.files.wordpress.com/2012/08/big-banner-edit5.png) no-repeat;
    }

    Any other ideas?

  6. Somehow I managed to solve the problem courtesy of http://en.forums.wordpress.com/topic/twenty-eleven-theme-change-custom-header-with-css?replies=11.

    However, now there is a white space at the top of the header unfortunately.

Topic Closed

This topic has been closed to new replies.

About this Topic