Stretch featured header image

• 

  bizblurb · Member · Dec 20, 2016 at 7:49 pm

  • Copy link
  • Add topic to favorites

  Hi,
  My featured header image is centered with the Gazette theme. To me, it’s not as aesthetically pleasing as it would be if the image stretched the width of the screen. Is there a way to do this seamlessly so that it works well for computer and smartphone?

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

• 

  bizblurb · Member · Dec 20, 2016 at 7:51 pm

  • Copy link

  It would also be great if the header image took up more screen in general and maybe even bordered with the top menu. Thanks!

• 

  thesacredpath · Member · Dec 21, 2016 at 5:01 am

  • Copy link

  Hi there, if only every theme were this easy to do this on. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS to make the header image full width on Gazette.

  .header-image-inner {
    width: 100%;
  }
  .header-image-inner img {
    width: 100%;
  }

• 

  thesacredpath · Member · Dec 21, 2016 at 5:03 am

  • Copy link

  The gap between the menu and the header image is a top margin on the header image parent div. Add the following to close that up.

  .header-image {
    margin-top: 0;
  }

• 

  bizblurb · Member · Dec 21, 2016 at 9:41 am

  • Copy link

  Thanks so much! Works perfectly. One more question: Below the featured header image, I’d like to add a home page “welcome” text box… one that is between the header image and the featured blog posts. Can this be done? And will it be possible to choose the font type?

• 

  bizblurb · Member · Dec 21, 2016 at 9:50 am

  • Copy link

  A code that can place a text box between the main menu and featured header image would be appreciated as well if possible. Thanks so much for the help.

• 

  thesacredpath · Member · Dec 21, 2016 at 8:04 pm

  • Copy link

  You can give this a try. It is typically only used for a few words, and not a large block of text, and although you can set a font, it would have to be either one of the ones set at Customize > Fonts, or a font that is typically installed on all computers. Here is a site that shows the common fonts for Windows and Mac.

  #primary:before {
  	content: "This is a welcome";
  	display: block;
  	text-align: center;
  	margin-top: 20px;
  	font-size: 110%;
  }

• 

  bizblurb · Member · Dec 22, 2016 at 8:43 pm

  • Copy link

  It works but the message shows up on every post, not just the home page. Can that be altered?

• 

  thesacredpath · Member · Dec 22, 2016 at 9:34 pm

  • Copy link

  Oops, I forgot to add the “home” CSS class to the beginning to limit this to only the home page. Use this instead.

  .home #primary:before {
  	content: "This is a welcome";
  	display: block;
  	text-align: center;
  	margin-top: 20px;
  	font-size: 110%;
  }