Resizing header without streching image

• 

  andrewjhayward · Member · Jan 17, 2012 at 11:55 pm

  • Copy link
  • Add topic to favorites

  I’m using the Twenty Eleven theme on a wordpress.com hosted site. I’ve increased the width of the theme a little to 1200 px, which makes the header width 1200px also and i’ve changed the header height from 288 to 200 px. I’ve used the following code in the custom design editor:

  .one-column #page {

  max-width:1200px;

  }
  branding img {

  height:200px;

  margin-bottom:-7px;

  width:100%;

  }

  However, since the uploader only lets you upload 1000 x 288 its distorted my image alot since it’s stretched and compressed it. Is there a way I can get round this or redefine a header URL in the custom design css?

  The blog I need help with is: (visible only to logged in users)

• 

  timethief · Member · Jan 18, 2012 at 12:01 am

  • Copy link

  I’ve increased the width of the theme a little to 1200 px

  I’ve flagged this thread so it gets moved to the CSS forum for you where you can get help with CSS editing.

• 

  thesacredpath · Member · Jan 18, 2012 at 1:19 am

  • Copy link

  This is what I get when I click on your username:

  whitworthsjogle4brads.wordpress.com is no longer available.
  The authors have deleted this blog.

  We need a link to the site you are actually talking about.

• 

  thesacredpath · Member · Jan 18, 2012 at 1:20 am

  • Copy link

  And be aware that all comments that you have made on wordpress.com sites while logged into wordpress.com are linked to a deleted blog so people cannot click on your username and find your site.

• 

  andrewjhayward · Member · Jan 18, 2012 at 11:24 am

  • Copy link

  oops, sorry about that. I’ll try and find out how to unlink it. The site I’m talking about is http://www.andrew-hayward.com

• 

  thesacredpath · Member · Jan 18, 2012 at 12:07 pm

  • Copy link

  For your link on your username go to users > personal settings, scroll to the bottom and put the new URL into the “website” field and save.

  It appears like you have this taken care of since I see a header image now in #branding at 200px tall.

• 

  andrewjhayward · Member · Jan 18, 2012 at 1:48 pm

  • Copy link

  Yes, thank you, I managed to find some code that you posted elsewhere about this :)

  #branding {
  background:url(‘http://andrewjhayward.files.wordpress.com/2012/01/header2lowq1.jpg’) no-repeat scroll center bottom transparent;
  height:200px;
  }

  #branding img {
  display:none;
  }

  #access {
  margin-top:200px;
  }

  It looks like I have to change the bottom to top in the #branding { statement to make it fit properly, otherwise it leaves a black bar at the top, have I got a dimension wrong somewhere? The image i’m using is 1060 x 200 px

• 

  thesacredpath · Member · Jan 18, 2012 at 5:56 pm

  • Copy link

  No you did not miss anything, #branding has a 2px top border and to get rid of it add this
  border-top: none;
  to #branding.

  When using the white color scheme, the border is a grey.