Search Bar Locations

• 

  thesacredpath · Member · Jan 10, 2012 at 11:14 pm

  • Copy link

  header.png is 4861px x 1250px.

• 

  designsimply · Member · Jan 10, 2012 at 11:18 pm

  • Copy link

  This one’s good: http://rossdansby.files.wordpress.com/2012/01/header.png

  To make it really big, try this:

  #header {
  padding-bottom: 10px;
  }
  #header-image-link {
  height: 180px;
  width: 700px;
  background: url(http://rossdansby.files.wordpress.com/2012/01/header.png?h=180) no-repeat;
  }
  #header-image-link img {
  display: none;
  }

• 

  rossd2002 · Member · Jan 10, 2012 at 11:20 pm

  • Copy link

  i just made this one on AI and its should be 1000px by 300xp

  http://rossdansby.files.wordpress.com/2012/01/header-2

• 

  rossd2002 · Member · Jan 10, 2012 at 11:21 pm

  • Copy link

  

• 

  thesacredpath · Member · Jan 10, 2012 at 11:22 pm

  • Copy link

  Nope, it comes out at 2864 x 734.

  Do the “save for web and devices” from the file menu instead of just doing a save. That will set it at 72DPI and optimize it for the web.

• 

  thesacredpath · Member · Jan 10, 2012 at 11:27 pm

  • Copy link

  BTW, with a 1000px wide header image (the site is only 960px wide) what do you intend on doing with the navigation as there won’t be any place for it?

  750px in width is about all you have to work with as far as width.

• 

  thesacredpath · Member · Jan 10, 2012 at 11:34 pm

  • Copy link

  You need to download the image I created and the upload it to your own media library and replace the URL between the double quote marks in the background declaration below.

  Image Link: http://flippintestblog.files.wordpress.com/2012/01/header-2-opt.png

  #header-image-link {
  background: url("http://flippintestblog.files.wordpress.com/2012/01/header-2-opt.png") no-repeat scroll 0 0 transparent;
  width: 750px;
  }
  
  #header-image {
  display: none;
  }

• 

  thesacredpath · Member · Jan 10, 2012 at 11:39 pm

  • Copy link

  Actually, replace the first bit of code with this instead.

  #header-image-link {
  background: url("http://flippintestblog.files.wordpress.com/2012/01/header-2-opt.png") no-repeat scroll 0 0 transparent;
  height: 150px;
  overflow: hidden;
  width: 750px;
  }

  And I expect you would like to move the content up closer to the header image.

  #header {
  padding-bottom: 0;
  }

• 

  rossd2002 · Member · Jan 10, 2012 at 11:46 pm

  • Copy link

  you people rock!

  thank you so much for all of your help, it looks great!!

• 

  thesacredpath · Member · Jan 10, 2012 at 11:52 pm

  • Copy link

  You are welcome. Make sure and download that image and upload to your media library and change out the URL since I regularly clear out the media library on my test blog.