[Resolved] How to add an header image on the homepage

[Pietro]

Hi,
sorry but I spent lot of time just trying to add an image header on my site.

My website has an image header in the top, without Site title, site tagline and logo. I already disabled all them, but I can’t find how to add an image, nor the suggested size of the image header to upload.

This is the website: http://www.sr22bond.info/

Thanks for any help!

[Leo]

Hi Pietro,

You can add header image in Customizer > Background Images > Header.
Looking at your current header space, a 940×80 image would fit perfectly.
You cal also adjust that space in Customizer > Layout > Header > Header Padding to fit the desired image.
Let me know if you need more help.

[Tom]

Uploading it as a background image can cause issues on mobile as the aspect ratio changes.

Instead, I would upload it as a logo in “Customize > Site Identity”.

[Pietro]

Uhm… I already did what suggested in the first answer, and I’m not getting trouble from mobile. But, just in case, I will try todo what you just suggested.

Thanks

[Tom]

Doing it as a logo will mean you can set your header padding to all 0’s as well, instead of using a large value like 200.

[Pietro]

No!
With the second option (Customize > Site Identity) I have big problems on mobile! I see a page that can be wide no more than 10 or 20 Px!!

(see image)
https://dl.dropboxusercontent.com/u/32794771/screenshot.jpg

But doing in the other way (Customizer > Background Images > Header), I don’t see any problem from pc or mobile.
Maybe I should leave these settings.

Pietro

[Tom]

That looks like an issue with your content padding, not the header?

Setting your content padding (Customize > Layout > Container) to something high like that will definitely cause mobile issues.

Mobile specific spacing options are on the way, but for now to get the kind of effect you’re looking for without making your content padding so high, you should do this:

.no-sidebar .content-area {
    max-width: 600px;
    margin: 0 auto;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

[Pietro]

Terrible results for mobile view!

Sorry but I’m 2 days “fighting” with your time just for set “basic” options, options that usually are easy to set even in the free themes.

My site it’s a really simple site: one image header on the top, only one column, no sidebars, no featured images/post, nothing of graphic effects, I only need the site is well visible from PC and mobile (more than 60% of my traffic is from mobile).

With the Leo solutions (Customizer > Background Images > Header —- You cal also adjust that space in Customizer > Layout > Header > ) this is the result:
http://mobiletest.me/iphone_5_emulator/?u=http://www.sr22bond.info/ (Mobile view of one website)

and with the solution from Tom I get this result:
http://mobiletest.me/iphone_5_emulator/?u=http://www.sr22insurancealaska.org/ (Mobile view of another website).

In both version the header image disappear.
First version, the site is unreadable at all!
Second version, the text is too sticky to the borders.

Both version, terrible quality of results.

So disappointed…

[Tom]

Sorry you’re disappointed – I’m trying to help 🙂

First site

The issue with the content is your content padding set in “Customize > Layout > Container”.

You have 150px of padding to the right and 150px of padding to the left.

Imagine a mobile phone with a width of 400px, and you’re using 300px of padding.

Solution: Set the content padding to something much smaller, like 40px: http://www.screencast.com/t/WUgqmeUl

There are better ways to add that much spacing to the sides of your content that I’m happy to help with.

Header disappearing

This is happening because you’ve enabled the mobile header in “Customize > Layout > Header”: http://www.screencast.com/t/LmoVpkjud

The mobile header disables the regular header and makes it more narrow. You can see it in action here on this site.

Solution: Disabling the mobile header completely if you want your regular header to appear.

I’m more than happy to work with you to achieve what you’re looking for if you are 🙂

[Tom]

BTW, you’ve inspired me to finally add a mobile content padding option for the next version: http://www.screencast.com/t/1LDWlonU

Hopefully my previous post is helpful 🙂

[Pietro]

Almost nothing change also after your last suggestions…

SECOND SITE
Before I posted 2 live mobile screenshot of 2 different websites. THe second website had already the 40 px content padding you are talking. I don’t see the problem of the first website (content padding too big), but I keep seeing the text sticked to the borders (same problem of before of the second website).
http://mobiletest.me/iphone_5_emulator/?u=http://www.sr22insurancealaska.org/

Header disappearing
I disabled the mobile header completely, now I see the title of the site but I still don’t see the image header
http://mobiletest.me/iphone_5_emulator/?u=http://www.sr22insurancealaska.org/

…

[Lyle]

Pietro,

One other thing I noticed is that the image you have in the header is 1200 x 275 which is way larger than the header size of 940 x ~215.

Also, this may be a time when you want to look into using a page builder (the free version of Elementor was used in this example) 🙂 I was able to recreate the site’s basic design in about 5 minutes, including resizing the header image which I set as the logo (as suggested) using the Customizer for GP. Below are the results 🙂

Desktop:

Mobile:

Cheers!
Lyle

[Tom]

That looks much better to me now: http://www.screencast.com/t/GvtFp8N4

The header is displaying the image, and the content is no longer so squished that it’s hard to read. Are you wanting less space between the edge of the phone and your content?

[Pietro]

@Lyle Even a page builder? For a, really, very basic and minimal site design? Incredible…

The only reason I have chosen to buy a premium plugin/theme and not using one of the thousands free themes is because Generatepress is really fast to load, responsive and (I was thinking before…) with the possibility of modify everything in a easy way. As I wrote before, my site is very minimal and I think most of the free themes can fit for it.
But I never thought I had to use lot of CSS codes, other plugins, even a page builder….
Probably it was a wrong purchase, just for my situation.

Anyway thank you very much for your efforts and help

P.

[Tom]

Hi Pietro,

Is something not right about how your site is now? Looks good to me on desktop and mobile? Also doesn’t look like it required any custom CSS to get there?

Of course, if you’re not happy just let me know and I’ll issue a refund 🙂

[Author]

Posts