Header Margins

• 

  designsimply · Member · Jul 8, 2013 at 3:19 pm

  • Copy link

  Still wasn’t able to load a header image 1040 x 250 to fit across the full header.

  This is expected if you’re using Themes > Background.

  If you wanted to change out the header to something larger than the theme allows, you can use custom CSS. Here is an example:

  @media screen and (min-width: 1143px) {
  #masthead > a img {
      display: none;
  }
  
  #masthead > a {
      display: block;
      background: url(https://thekams.files.wordpress.com/2013/06/cropped-imagination-header-adelle-3.jpg);
      width: 1143px;
      height: 250px;
  }
  }

  The 1143px width is based on using Proxima Nova size 2 for the Body Text in Appearance → Custom Design → Fonts. You can adjust font size first and then figure out exactly what size image to use based on that. Once you know the size, you can replace the url() value with an image you have resized and uploaded to your media library separately.