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 Tom,
Sorry - I didn't explain that well. What I meant was, can you add a photo to the area where the site title and tagline sit? I know you can change the colour of that area (if you have the additional colours add-on), but can you load an image as a background instead (and have the site title sit on top of that?).
Cheers
Mark

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/

One small correction. Remove the bracket at the end of this line:

  padding-top: 35%; /* (img-height / img-width * container-width) */}

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 for the CSS solution bdbrown, much appreciated!

Tom: I bought the add-ons package last night so I'll try that with backgrounds option, thanks :)

Thanks, Mark! :)