[Resolved] Site header image

Hi Mark,

You should just need to go to “Customize > Site Identity” and upload a logo.

It should show up below your site title and tagline by default.

Let me know 🙂

Hi Mark. Here’s one way to do it with css. You’ll need to adjust the sizes and locations for your site:

/* header background image */
.site-header {
  background: url("http://your-image-path.jpg") no-repeat center; 
  background-size: contain;
  width: 100%;
  height: 0;
  padding-top: 35%; /* (img-height / img-width * container-width) */}
}

/* position site title and tagline on top of image */
.site-branding {
  position: absolute;
  top: 10%;
  left: 25%;
}

/* title and tagline responsive font size */
/* ref: https://css-tricks.com/viewport-sized-typography/ */
.site-branding p {
  font-size: 2vw;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

If you want to set the header background as an image, you’ll actually only want to do the first part of the above:

.site-header {
  background: url("http://your-image-path.jpg") no-repeat center; 
}

The site title and tagline will sit on top by default.

Our Backgrounds add-on also allows you to do this through the Customizer 🙂

Thanks, Mark! 🙂