- This topic has 7 replies, 4 voices, and was last updated 5 years, 6 months ago by
Tom.
-
AuthorPosts
-
September 2, 2015 at 10:23 am #133833
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?
ThanksSeptember 2, 2015 at 10:46 am #133838Tom
Lead DeveloperLead DeveloperHi 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-developmentSeptember 2, 2015 at 2:07 pm #133878Mark
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
MarkSeptember 2, 2015 at 3:54 pm #133908bdbrown
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/
September 2, 2015 at 4:03 pm #133909bdbrown
One small correction. Remove the bracket at the end of this line:
padding-top: 35%; /* (img-height / img-width * container-width) */}
September 2, 2015 at 8:00 pm #133951Tom
Lead DeveloperLead DeveloperIf 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-developmentSeptember 3, 2015 at 12:57 am #133989Mark
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 π
September 3, 2015 at 10:02 am #134100Tom
Lead DeveloperLead DeveloperThanks, Mark! π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.