Fresh & Clean – Center Custom Header

• 

  hugsnkitchen · Member · Apr 14, 2013 at 3:23 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I’m very new to CSS and trying to figure out how to play with the custom header feature in the CSS upgrade.

  My blog is: hugsnkitchen.com

  The standard header size for this theme is 920 x 116, but I wanted to upload a larger image.

  I have one that is 1000 x 312, and I found the below code which allows the whole image to show up:
  #branding {
  background: url(‘http://hugsnkitchen.files.wordpress.com/2013/04/hugs_n_kitchen_logo_final_1000x312_20133.png’) 0 0 no-repeat;
  min-height: 300px;
  }

  The problem, is that it’s not centered.

  Can someone please help me figure out how to center the image in the header?

  Thank you!

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

• 

  justpi · Member · Apr 14, 2013 at 3:59 pm

  • Copy link

  The two number in the code mean distance from left and distance from top. You can replace them with the right words, i.e. instead of this:
  0 0 no-repeat
  write:
  center top no-repeat
  or:
  center center no-repeat

  Or you can adjust the horizontal positioning by changing the first 0 to a negative pixel value, i.e. instead of this:
  0 0 no-repeat
  write this:
  -40px 0 no-repeat

  But since the image has nothing but white space left and right, the right thing to do would be to crop it in an image editing application to make its width 920px.

• 

  hugsnkitchen · Member · Apr 14, 2013 at 5:00 pm

  • Copy link

  Thank you!!