Pilcrow Header Image Resizing Issues

• 

  betrothedbean · Member · Jun 9, 2011 at 7:44 pm

  • Copy link
  • Add topic to favorites

  I recently got the CSS editing upgrade and I have been working on widening the Pilcrow two column layout. I have managed to change the width successfully using this code:

  #wrapper {
  max-width:1000px;
  margin:0 auto;
  }
  
  #main-sidebars {
  max-width:530px;
  width:45.5%;
  }
  
  .two-column #container {
  max-width:925px;
  }
  
  .two-column #content {
  overflow:hidden;
  width:72.99%;
  }
  
  .two-column #sidebar,.two-column #secondary-sidebar {
  float:right;
  width:21.806%;
  }

  Obviously with a wider layout, I have been trying to also increase the width of my header. I have uploaded a new header image (http://withoutadornment.files.wordpress.com/2011/06/blog-header-larger.jpg) with the desired dimensions (925 x 250px) and tried to change the header image using this code:

  #header img {
  border-bottom:1px solid #222;
  background:#fff url('http://withoutadornment.files.wordpress.com/2011/06/blog-header-larger.jpg') 0 no-repeat scroll left top transparent;
  max-width:100%;
  width:925px;
  height:auto;
  }

  This has successfully changed the size of the header, but the image is a blown up and fuzzy version of the smaller (770 x 200px) original header I uploaded through the custom header dialogue under appearances.
  I used firebug to look at the code in an attempt to see what I was doing wrong and found that the size and location of the image is determined in the html.

  <div id="header">
  <div id="pic">
  <a rel="home" href="http://withoutadornment.wordpress.com/">
  <img width="770" height="200" alt="" src="http://withoutadornment.files.wordpress.com/2011/06/cropped-blog-header-13.jpg">
  </a>
  </div>

  Is there anyway to override the html with the css and make it use the header image that I want?
  (Note: I have restored it to the original layout because the header looked terrible: http://withoutadornment.wordpress.com)
  Thank you!

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

• 

  timethief · Member · Jun 9, 2011 at 8:11 pm

  • Copy link

  I do not help with CSS but I do know this > once one has CSS edited a theme they can no longer use the header image uploader and must include the image URL in their CSS.
  Hope this helps

• 

  panaghiotisadam · Member · Jun 9, 2011 at 10:14 pm

  • Copy link

  Try adding the bg image to #header instead. Something like this:

  #header {
  background:#fff url('http://withoutadornment.files.wordpress.com/2011/06/blog-header-larger.jpg') no-repeat bottom;
  width:925px;
  height:365px;
  }
  
  #header img {
  display:none;
  }

• 

  betrothedbean · Member · Jun 10, 2011 at 4:44 am

  • Copy link

  That worked! I had to adjust the height a bit to make it fit, but other than that everything appears to be where I want them to be.Thank you very much panaghiotisadam! :)

• 

  panaghiotisadam · Member · Jun 10, 2011 at 5:07 am

  • Copy link

  You’re welcome – I like your header very much!

  If I were you I would also change the black in the header and the footer.

• 

  timethief · Member · Jun 10, 2011 at 5:15 am

  • Copy link

  @Panos and betrothedbean
  Have you viewed the blog with Firefox 4.0? I have and the header overflows on the right hand side into the background.

• 

  panaghiotisadam · Member · Jun 10, 2011 at 6:01 am

  • Copy link

  Ah thanks! It’s not the browser version, it’s the window size. You’re probably viewing the blog in a narrower window than me (that’s why I hadn’t noticed the problem), and the main column and the sidebar have flexible widths while the header image has a fixed width. I’ll see what I can do.

• 

  panaghiotisadam · Member · Jun 10, 2011 at 6:02 am

  • Copy link

  (But of course devblog can correct this a lot easier than me!)

• 

  panaghiotisadam · Member · Jun 10, 2011 at 6:17 am

  • Copy link

  @betrothedbean: Best thing I can think of is add back the max-width:100% and change bottom to bottom right.