[Resolved] Foreground content scrolls up over background (not just a one-page site)

[NBC]

Client has fallen in love with one specific aspect of the way this site works. Not the sticky menu. Not the fact that this is a one-page website. Just the way the content scrolls up over the background image and obscures it.

I’ve seen this effect built in to several themes and page builders, but I’m not looking for an alternative to GPP: just a way to accomplish one specific effect. Each page will have a different background image with a headline and subhead on top of it. Below that, the page content should scroll up over the image/head/subhead combo.

I have spent the better part of three days looking for an easy way to accomplish this. All the slider plug-ins produce “gallery” effects using multiple images and forward-and-back arrows. All I’m trying to do is to accomplish this foreground-slides-over-the-background trick.

Any suggestions? I’ve experimented with fixed background images and sections, but sections don’t slide independently.

[Paul]

You should be able to achieve that effect with a Section or Page Header.

If you also wanted the navigation and header to appear over the image then you would use a Page Header, if not – then use a Section.

Section

Create the Section and add your background image (may as well disable parallax), and give the Section a custom class.

Then you need to add some custom CSS:

.custom-section-class{background-attachment:fixed;background-size:cover;}

Page Header

I don’t think it’s possible to give a Page Header a custom class, so in this case you would target the Page Header on a specific page:

.page-id-199 .generate-content-header{background-attachment:fixed;background-size:cover;}

You would change .page-id-199 to whatever the page ID is. You can view the source of the page in your browser to find that ID. It will be in the <body….. part of the code.

You will of course need to set your image in the Page Header, this video might help you if you aren’t familiar with the Page Header settings:

https://docs.generatepress.com/article/page-header-overview/

Hope that helps!

[NBC]

Hi, Paul:

I went the Page Header route, and placed the custom CSS code in my child theme.

Two problems:
1. Image is displayed at an enormous size.
2. All text appears below the image.

[Tom]

Great explanation, Paul!

Can you link us to the page possibly?

[Paul]

1. Try changing the background image size from “cover” to 100%

.page-id-199 .generate-content-header{background-attachment:fixed;background-size:100%;}

2. Did you add the text to the Page Header’s Content section?

As Tom said, it would be good to see the page.

[Paul]

You will probably want to change the background back to cover for smaller screen sizes, and also play with padding etc. It’s a cool effect but can take some messing to get it to display nicely on all screen sizes 🙂

[NBC]

It took me an hour to prepare a place to put the site, get it exported, and reimport it. I have sent Tom the link via e-mail. (This site is at a point at which I can’t make it widely visible.)

How do most people handle the process of making a temp version visible for comments and advice? I have to create a subdomain, install WordPress, export/import, and tralala. Presto, there goes an hour.

Thanks ever so much for the help. When I get this issue sorted out, I will fade back into the woodwork. 🙂

[NBC]

When I place the text in the Page Header’s content box, the text does not appear when the page is rendered.

If I change the background size from “cover” to “100%,” the image repeats vertically.

[NBC]

Any thoughts? I’m stumped.

[Paul]

You could use background-repeat:no-repeat; to stop the repeating, but that only happens for me if I add too much content.

You could also try increasing the size to 110% or higher. Changing it back to cover will also prevent repeating (that’s what the site you linked to uses), but you mentioned that made the image too big.

Here’s a very rough demo I tried this on. <edit>28/07 – needed to change the theme on test site, so link removed</edit>

Hopefully Tom or Leo can help you with the content not showing.

[NBC]

I looked at your demo, and when I scroll the page, the entire page scrolls.

I was hoping to get the content to scroll up over the image, covering it up with white as the text area moves over the photo.

Sorry for the inept description, but I can’t find a better way to clarify the intent.

(And I can’t post a site link in public at this point.)

[Paul]

Strange… for me the image stays in position and the white content area gradually covers it up as you scroll down the page – exactly the same behaviour as on the link you shared.

Here’s a screen grab mid-scroll.

Tested in Chrome, Firefox, Safari & Edge. I disabled it on mobile though.

[Tom]

As of right now, I’m seeing the image and it has the effect I’m assuming you’re going for (fixed).

Then there’s a big blank space below, which is due to white text on a white background.

That’s being caused by this CSS:

EGsubtitle {
    color: #FFFFFF;
}

[NBC]

Yes, the text is in white so it will be visible over the dark image background. The site body should have no background color. If the text is dark, it will be invisible as it slides up.

Ack. Now what.

[NBC]

Turning on the “Parallax” switch in the Page Header options made the scrolling effect start working.

I gave up on the idea of the sliding content area having a transparent background. I made the text black for the moment so it’s visible. I’ve refreshed the prototype that I’ve put up online.

So now I have a working page, with the same two notable exceptions that I’ve had all along.
1. The page header image is enormous. Nothing I do in the custom CSS I’ve added through Simple CSS (to make the image assume a fixed position) has any effect on image size. I switched from “cover” to “contain,” thinking that would constrain the image to the width of the viewport/browser window. No such luck. I can tell that the image is being enlarged because of the pixelation I see in it.
2. The text I’ve added in the Page Header’s Content area does not show up. Period. It’s not in the page code. It’s not on the page. The Section text duly appears.

I wish I could share the link to this prototype, but I can’t. I have e-mailed it to the GP support e-mail address.

If Tom or Leo sees this . . . HELP!

[Author]

Posts