Site header image

[Mark]

Hi, is there a way to add an image to the site header area and keep the site name and tagline on top of this?
Thanks

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mark]

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

[bdbrown]

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/

[bdbrown]

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

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

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mark]

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 🙂

[Tom]

Thanks, Mark! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts