WordPress.com

1. themabelkwong
   Member
   Aug 23, 2012, 2:13 PM

   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. zandyring
   Staff
   Aug 23, 2012, 2:58 PM

   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. themabelkwong
   Member
   Aug 24, 2012, 11:54 AM

   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. zandyring
   Staff
   Aug 24, 2012, 12:21 PM

   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. themabelkwong
   Member
   Aug 24, 2012, 12:35 PM

   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. themabelkwong
   Member
   Aug 24, 2012, 1:57 PM

   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.