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

Home Forums Support Foreground content scrolls up over background (not just a one-page site)

Viewing 15 posts - 1 through 15 (of 29 total)
  • Author
    Posts
  • #355154
    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.

    GeneratePress 1.3.48
    GP Premium 1.3.1
    #355221
    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!

    My GeneratePress-based portfolio: http://www.pauldixonwebdesign.co.uk

    #355303
    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.

    #355313
    Tom
    Lead Developer
    Lead Developer

    Great explanation, Paul!

    Can you link us to the page possibly?

    #355347
    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.

    My GeneratePress-based portfolio: http://www.pauldixonwebdesign.co.uk

    #355365
    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 🙂

    My GeneratePress-based portfolio: http://www.pauldixonwebdesign.co.uk

    #355372
    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. 🙂

    #355401
    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.

    #355444
    NBC

    Any thoughts? I’m stumped.

    #355460
    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.

    My GeneratePress-based portfolio: http://www.pauldixonwebdesign.co.uk

    #355471
    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.)

    #355478
    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.

    My GeneratePress-based portfolio: http://www.pauldixonwebdesign.co.uk

    #355504
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #355579
    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.

    #355668
    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!

Viewing 15 posts - 1 through 15 (of 29 total)
  • You must be logged in to reply to this topic.