Adjusting stretched header in Twenty Eleven

• 

  themabelkwong · Member · Aug 23, 2012 at 2:13 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  zandyring · Staff · Aug 23, 2012 at 2:58 pm

  • Copy link

  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!

• 

  themabelkwong · Member · Aug 24, 2012 at 11:54 am

  • Copy link

  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?

• 

  zandyring · Staff · Aug 24, 2012 at 12:21 pm

  • Copy link

  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

• 

  themabelkwong · Member · Aug 24, 2012 at 12:35 pm

  • Copy link

  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?

• 

  themabelkwong · Member · Aug 24, 2012 at 1:57 pm

  • Copy link

  Somehow I managed to solve the problem courtesy of https://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.