Help needed with Header – Suits Theme

• 

  montgomerybp · Member · Oct 6, 2014 at 2:55 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  I’m trying to get my header to fill the entire top portion of the website (I know it will need to be resized to make it look right), but it keeps putting space on each side. Can anyone tell me what CSS I need to put in to make it longer? Thanks!

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

• 

  lizthefair · Member · Oct 6, 2014 at 5:38 pm

  • Copy link

  I think if you just use a bigger image the problem will take care of itself. If not, this will stretch whatever image you choose to fit.

  .site-header {
  background-size: 1500px 175px;
  }

• 

  montgomerybp · Member · Oct 6, 2014 at 5:46 pm

  • Copy link

  Ah, perfect. Thanks, Liz!

• 

  designsimply · Member · Oct 6, 2014 at 5:57 pm

  • Copy link

  What you probably are looking for is the contain value for the background-size property. Check out this page to learn more about how it works:
  https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

  Here is some example CSS that will adjust your current background image to make it cover the full site header area:

  .site-header {
  	background-size: cover;
  }
  
  .site-header .home-link {
  	min-height: 250px;
  }

  As you can see, the text in an image can get cut off depending on the width of the browser. To get around this problem it’s best to display the site title in text and use a header image without any text when working with the background-size cover property.

• 

  montgomerybp · Member · Oct 6, 2014 at 7:26 pm

  • Copy link

  Ah, I see. Is it possible to make the header area larger through CSS?

• 

  designsimply · Member · Oct 6, 2014 at 7:56 pm

  • Copy link

  Certainly. The min-height part from my example earlier should do that already actually. Try adjusting 250px to different values and watch how it changes — background-size:cover is kind of an odd thing until you get used to it. :) I think it helps tons to experiment and mess around with different header heights as well as different browser widths, so try adjusting your browser width while you’re testing out the CSS.

• 

  montgomerybp · Member · Oct 7, 2014 at 1:38 pm

  • Copy link

  Hi again,

  I played with the size of the header and ended up with 1565 by 294. I changed the size of my header file (found here), but it’s getting stretched and the quality isn’t as sharp. Do you know why this is happening?

• 

  montgomerybp · Member · Oct 7, 2014 at 1:49 pm

  • Copy link

  I know it’s better to display the site title in text, but putting text on the title is the only way I can get my company’s font (Dosis) on the blog page.

• 

  lizthefair · Member · Oct 7, 2014 at 3:47 pm

  • Copy link

  Does this help:

  .site-header,.home-link{
      background-image: url('http://oi59.tinypic.com/2u9mi5i.jpg');
      background-position: center;
      max-width: 1565px !important;
      min-height: 294px !important;
  }

• 

  montgomerybp · Member · Oct 7, 2014 at 3:50 pm

  • Copy link

  Yes! Thanks again! :)

• 

  montgomerybp · Member · Oct 7, 2014 at 3:54 pm

  • Copy link

  Oh, one last thing. Is there any way to get the header (the image and yellow underneath the links) to center once the page is stretched beyond the max width and height?

• 

  lizthefair · Member · Oct 7, 2014 at 4:00 pm

  • Copy link

  I imagine there is, but I’m testing on an 11 inch MacBook air, so I can’t stretch it any larger, and I’m not good enough at CSS yet to suggest code I can’t test. @designsimply is good enough though (and probably has a bigger monitor) so she should be able to help you.

• 

  thesacredpath · Member · Oct 7, 2014 at 6:55 pm

  • Copy link

  @montgomerybp, I’m seeing the header image centered clear out to a width of 2560px on my 27″ monitor and the navigation band (yellow) extends full width also. Did you get this resolved or am I misunderstanding/not seeing it?

• 

  montgomerybp · Member · Oct 7, 2014 at 6:58 pm

  • Copy link

  Sorry, I hadn’t saved the code. You should be able to see the latest now.

• 

  hallluke · Member · Oct 7, 2014 at 8:28 pm

  • Copy link

  If you add this it should work (although it’s hard for me to test as I had to stretch the browser to twice the width of my monitor and scroll around a lot!):

  #masthead {
    margin:0 auto;
  }

• 

  montgomerybp · Member · Oct 8, 2014 at 1:05 pm

  • Copy link

  Worked perfectly. You have all been so helpful, thank you!