[Resolved] Full Background on Homepage

[Janet Davis]

Hello,
I searched through the archives and tried several of the options with CSS to create a full homepage background.
None of them worked.

Currently, I have the background in the body with no repeat, 100% width, local, and center settings.

I have the site hero element merged with the header.

I’d like to make the homepage menu background not be white but merged into the menu.

And have the full page without the white stripe with the image complete.

Thank you for your help.
Janet

[Leo]

Hi there,

The header element has navigation colors which you can set for the specific page hero:
https://docs.generatepress.com/article/header-element-overview/#navigation-colors

As for the full page layout, are you done with adding the content?

Let me know 🙂

[Janet Davis]

Leo,
There is no more content being added to the homepage.
Janet

[Leo]

That case I wonder if we can create the home page with a header element.

Try uploading the body background image as the page hero background image:
https://docs.generatepress.com/article/header-element-overview/#background-image

Then set it to full screen:
https://docs.generatepress.com/article/header-element-overview/#full-screen

Then we can hide the site content with this:

.home .site {
    display: none;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know when this is done and I can have another look 🙂

[Janet Davis]

Hey Leo,
We are getting closer…

On the tablet, desktop, and phone there is room around the homepage where you see white. It is most noticeable on the phone on the bottom, the tablet – top and bottom, the desktop on the left and right sides.

I have the container and inner container at full width.

Janet

[Leo]

I’m seeing this in the HTML:
https://www.screencast.com/t/0n2qd0D4

Did you add that somewhere? Can you try removing it?

[Janet Davis]

I didn’t add this. I started the site with the boost site library in GP, then switched it to the child theme I am using now Split from the library.

Where would I find this in the HTML to remove it?

[Leo]

It would be the Hooks Element explained here:
https://gpsites.co/boost/?page_id=43

[Janet Davis]

I removed the hooks with the site wrapper.
There are no more hooks on my site just elements and I didn’t see the code on any of them.

There is still no change.
Thank you

[Leo]

Have you tried clearing the browser cache?

This is what I’m seeing now:
https://www.screencast.com/t/bqry9jrk

[Janet Davis]

I have cleared my cache.
The left and right issues are gone.

On the phone, there is a band of white background showing on the bottom. If I slide on the image the white background shows on the top.

On the tablet there is a top and bottom issue when the image is touched, but not too bad.

On the desktop, there is a slight issue on the top and bottom, but not too bad.

Getting closer 🙂

[Leo]

I don’t believe the page hero is set to full screen as suggested here?
https://generatepress.com/forums/topic/full-background-on-homepage/#post-1055144

[Janet Davis]

I see there isn’t a way for me to send you a screenshot of my settings.

Container is fullwidth
Inner container is full width
Horizontal aligned center

The padding I’ve played with many different % and some do make the white disappear more, but then the image doesn’t correct.

Please tell me specifically what is not set up correctly instead of referring me back to a post.

Thank you

[Leo]

Have you activated the full screen option as suggested above?
https://www.screencast.com/t/feU0wxci5

[Janet Davis]

Leo – thank you for the screenshot.

I didn’t even see this checkbox. I will need to play with the paddings to make it look better.

Thank you for your help and patience.

[Author]

Posts