Centering header image

• 

  groksurf · Member · Mar 7, 2010 at 9:21 am

  • Copy link
  • Add topic to favorites

  I uses the Andreas09 theme which doesn’t support custom headers, but I did learn I could tweak the header by supressing the display of the blog title and replacing it with an image (text in a particular font), using this css technique:

  #sitename {
  background:transparent url(‘http://groksurf.files.wordpress.com/2009/12/logo24.png’) no-repeat;
  }

  #sitename h1 a {
  color:transparent;
  display:none;
  }

  If you look at my blog header, the “GrokSurf” text is actually an image, not text.

  My question: is there a way to make the image centered in the header instead of being in the left-justified position?

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

• 

  panaghiotisadam · Member · Mar 7, 2010 at 9:34 am

  • Copy link

  I don’t know if it’s possible, but I think it shouldn’t be done: Andreas09 is a flexible-width theme. Centering the blog title would mean it would slide above the header tabs if you dragged the browser window horizontally to resize it. And anyway a centered title doesn’t fit with left-aligned header page tabs.

• 

  milkandcola · Member · Mar 7, 2010 at 11:07 am

  • Copy link

  try adding:

  background-position:center;

  to your background string.

• 

  groksurf · Member · Mar 7, 2010 at 4:51 pm

  • Copy link

  @milkandcola I tried adding that string but the image doesn’t display at all then.

  @panaghiotisadam Thanks for pointing that out, although I think it might be acceptable (if only I could make it work as an experiment to see for sure).

• 

  designsimply · Member · Mar 7, 2010 at 6:43 pm

  • Copy link

  @groksurf, I think milkandcola’s suggestion should work. I tested it with Firebug and it worked for me. I used Firefox 3.6 to test. Did you add the background position like this?

  #sitename {
  background:transparent url('http://groksurf.files.wordpress.com/2009/12/logo24.png') no-repeat;
  background-position:center;
  }

  Adding it like this should work too:

  #sitename {
  background:transparent url("http://groksurf.files.wordpress.com/2009/12/logo24.png") no-repeat center center;
  }

• 

  groksurf · Member · Mar 7, 2010 at 8:53 pm

  • Copy link

  @designsimply I tried your second suggestion and it works. I think my first attempt didn’t work because I didn’t realize I needed the extra semicolon after background-position:center as opposed to just putting that string inside the semicolon for the original background: statement (hope that makes sense!)

  Anyway, @panaghiotisadam’s caution is a good one. I found that for the most part it looks okay when resizing the display, but if one narrows it too much then the header starts to get obscured by the margins.

  So, I may end up not making the change permanent, but I do appreciate everybody’s feedback. Thanks all!