Header Display

[Dwight]

How do I get my header (under background images) to show correctly on desktop and mobile?
http://www.niaimanirocks.com/

• This topic was modified 4 years, 9 months ago by Dwight.

[Tom]

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/

• This reply was modified 4 years, 9 months ago by Tom.

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

[Dwight]

What’s the best size for the header image?
What’s the best size for the body background image?

Thanks!

• This reply was modified 4 years, 9 months ago by Dwight.
• This reply was modified 4 years, 9 months ago by Dwight.

[Tom]

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 🙂

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

[Dwight]

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.

[Tom]

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”.

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

[Dwight]

Perfect! Thanks a million…love your theme!

[Tom]

You’re welcome 🙂 Thanks for using it!

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

[Author]

Posts