Archived topic
Header Display
7 replies · Started by Dwight on February 26, 2016
How do I get my header (under background images) to show correctly on desktop and mobile?
http://www.niaimanirocks.com/
Instead of uploading it as a background image, upload it as a header in "Customize > Site Identity".
Then if you want it to go full width, add this CSS:
.inside-header.grid-container {
max-width: 100%;
}
.inside-header img,
.site-logo {
width: 100%;
}
Adding CSS: https://generatepress.com/knowledgebase/adding-css/
What's the best size for the header image?
What's the best size for the body background image?
Thanks!
Depends on how big you want the header image - it can be tiny or really big, it all has to do with your design.
If you want it to span the entire width of your page, it should be around 1500px I'd say.
For the background image, I suggest using images that don't have any text etc.. as it won't show on all screens due to aspect ratio changes. Background images should be designs/patterns, and again can be as large or a small as your design needs :)
There's only Logo and Site Icon under Site Identity.
The header is 1500px wide and after putting it under site identity/logo and putting the CSS, it still didn't expand full width.
I adjusted the CSS above: https://generatepress.com/forums/topic/header-display/#post-175519
Then to remove the spacing around the header, use the Spacing add-on (if you have it) in "Customize > Element Spacing".
Perfect! Thanks a million...love your theme!
You're welcome :) Thanks for using it!
