[Resolved] Header image

[Heath]

Instead of the header image repeating in desktop view and tablet view… it’s there a way to make it full width while showing the whole image?

[Fernando]

Hi Heath,

The aspect ratio of the background image you have for your Header isn’t appropriate if you want a full-width and uncropped image.

I think an aspect ratio of around 4/1 or 5/1 would be ideal.

This would lessen the potential cropping of your Background Image.

So the way to do this is to upload an Image with a 4/1 or 5/1 aspect ratio and use this image as the Header Background image instead.

[Heath]

Oh… it’s there a way to have a different header image for desktop and tablet and a different one for mobile?

[Fernando]

I see. Good Point.

If you have GenerateBlocks Pro, then there’s a different approach where you can use the Advanced Backgrounds to have different images for different views:

https://docs.generateblocks.com/article/advanced-backgrounds/

Otherwise, you’ll need custom CSS.

Let us know if you have GB Pro or not so we can guide you toward the most appropriate solution.

[Heath]

I’m confused on how to get this. The photo in currently using is under customize>background>header and I don’t see the option for the tool.

[David]

Hi there,

you will need CSS.

1. In Customizer > Background first change the Repeat to: norepeat

2. Add this CSS:

@media(min-width: 768px) {
    .site-header {
        background-image: url('the_full_url_to_your_desktop_image');
    }
}

Where it says: the_full_url_to_your_desktop_image replace that with your full URL to the image you want on desktop.

[Heath]

This CSS didn’t help with making the image cover the full background….it just didn’t repeat. I do have GB Pro though so I’m curious why I’m not getting the option that Fernando mentioned above.

[Fernando]

David’s approach is the easier route with your structure actually.

With GB Pro, you can use it in conjunction with a GPP Block Element, and hook an element before the Header to replicate the upper portion of your current header with a Background Image. With that, through GB Pro’s Advanced Backgrounds, you’ll be able to set different images per view.

Example: https://share.getcloudapp.com/12uREe5D

With regards to the CSS not working, I can’t see the CSS added to your site currently. May we know how you added it? Can you try clearing cache?

[Heath]

I removed the css since it wasn’t working.

[Fernando]

The CSS is so you can manually add a wider image for tablets and desktops.

The theory is if you set it to no-repeat, your image won’t fill the full width of your screen because of its aspect ratio. Thus, it would be best to replace the image with a wider one for tablets and mobiles.

If the aspect-ratio isn’t appropriate as well, it’s normal that there would be white space if the image size is set to “contain”.

Currently, the easiest approach is to use David’s CSS here, and add a wide image for tablet and mobile: https://generatepress.com/forums/topic/header-image-10/#post-2444771

Then, if there’s whitespace still, we’ll resort to a little CSS fix.

[Heath]

Ok. I’m going to live with the image repeating at this point.

But I included a screenshot showing all the white space amd the image in the background of the header. Also it seems the header display is wider than the screen as I move to the right it shows white space. I don’t want any of it.

How do I get rid of all the white space and the light background image?

[Heath]

Any suggestions?

[Heath]

I’m not figuring this out on my own.

[Fernando]

Hi Heath,

Sorry for the delay in response.

Can you try adding this CSS through Appearance > Customize > Additional CSS for the top and bottom Header “whitespace” on mobile?:

@media (max-width: 768px) {
    header#masthead {
        background-size: cover;
    }
}

As for the spacing to the right, can you try #1 here?: https://docs.generatepress.com/article/debugging-tips/

It would be good to take a backup of your site before doing this.

Let us know how it goes.

[Heath]

So i figured out the source on the right. But they’re is still the weird background image in the door before the adsense ads show up. If like that gone if possible and I sent a screenshot.

[Author]

Posts