Sight theme: Adjust header image width

• 

  mensalcoweb · Member · May 10, 2013 at 6:51 pm

  • Copy link
  • Add topic to favorites

  Hi there, I need some help to adjust the image size of the header.
  Any suggestions?
  Thanks!!

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

• 

  thesacredpath · Member · May 10, 2013 at 9:07 pm

  • Copy link

  Sight supports the flexible header image. Upload the image at appearance > header in the side you want and then click the “use as is” button to insert the header without cropping or resizing.

• 

  mensalcoweb · Member · May 10, 2013 at 11:22 pm

  • Copy link

  Thanks for your reply, but unfortunately is the heigh that is flexible, but not the width, so I thought there could be a css to allow me change it.

  Is there another way?
  Thanks!

• 

  thesacredpath · Member · May 10, 2013 at 11:56 pm

  • Copy link

  We can do that. Have you prepared the image and uploaded it to your media library? If so, get the URL of that image by going to media > library, click on “edit” and then in the save module at upper right, copy the URL and paste it here.

• 

  mensalcoweb · Member · May 11, 2013 at 12:50 am

  • Copy link

  ok, here it is:
  

• 

  thesacredpath · Member · May 11, 2013 at 1:09 am

  • Copy link

  Give this a try.

  .site-header hgroup {
  background: url("http://mensalco.files.wordpress.com/2013/05/header05.jpg") no-repeat scroll left top transparent;
  width: 100%;
  }

• 

  mensalcoweb · Member · May 11, 2013 at 1:38 am

  • Copy link

  Almost there! there’s a white area on the right side and the bottom.
  The image size that I uploaded is 975×164

• 

  thesacredpath · Member · May 11, 2013 at 3:31 am

  • Copy link

  Sorry, I see that now. It didn’t show originally with Firebug in Firefox. Delete what I gave you and add the following.

  .site-header hgroup {
  background: url("http://mensalco.files.wordpress.com/2013/05/header05.jpg") no-repeat scroll right top transparent;
  width: 975px;
  }
  
  .main-navigation {
  margin-top: 0;
  }

• 

  mensalcoweb · Member · May 12, 2013 at 5:52 pm

  • Copy link

  Yeah!!! that worked ;)

  Thank you so so so much!

• 

  thesacredpath · Member · May 12, 2013 at 8:21 pm

  • Copy link

  You are welcome.

• 

  winbassett · Member · May 12, 2013 at 8:46 pm

  • Copy link

  @thesacredpath

  I’m trying to add an image (logo) to the right of my site title in “Sight.” Can you help with the CSS (just using URL for image path for now).

  Thanks!

• 

  thesacredpath · Member · May 13, 2013 at 4:35 am

  • Copy link

  The code would look something like this although adjustments would likely be necessary depending on logo size.

  #header {
  background: url("URL OF IMAGE") no-repeat scroll left top transparent;
  text-indent: -9999px;
  }
  
  #header a {
  display: block;
  }
  
  #header a:hover {
  background-color: transparent;
  }

  If you upload the image to your media library and then post the URL of that image here, we can get closer than the above.

• 

  winbassett · Member · May 14, 2013 at 11:44 am

  • Copy link

  Nothing seems to change.
  

• 

  thesacredpath · Member · May 14, 2013 at 6:19 pm

  • Copy link

  Do you want a full-width header, or do you want to put a logo to the right of the existing header? In another thread you started you stated you wanted a full width header image.

• 

  thesacredpath · Member · May 14, 2013 at 6:19 pm

  • Copy link

  If you want a full-width header image, can you respond in the other thread you started on that so we can keep from confusing things with me answering in two different places?