Make parts 2, 3 & 4 etc work like part 1 on the home page

  • I’m using Twenty Seventeen with a static front page with 4 additional sections. On the very top part, as you scroll down the logo, site name, and tagline scroll up over the opening image. There’s a clear background to the logo, title, tagline group, so the 1st image shows through.

    As you scroll down further the 2nd image comes into view, and it’s completely displayed when the 1st image has scrolled off the screen and the menu is now at the top. Continue scrolling and the text of the next section scrolls up, covering over the 2nd image. However, this text has a white (in my case) background and the image does NOT show through.

    This is the same behavior for the remaining image/text pairs. What I want to know how to do is make the background on those text sections clear, like in the topmost section. I’ve seen how their color can be changed, but not how it can be made to be transparent.

    Any help would be greatly appreciated.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter john-biddle

    (@john-biddle)

    I’ve spent quite a bit of time using the Chrome Developer tools on this and am making no progress. I can change the background color to anything but transparent (none doesn’t work either). I’m stumped. Maybe one of you CSS gurus can assist. Or maybe this is a javascript issue? I see lots of js in there.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What I want to know how to do is make the background on those text sections clear

    Instead of this:

    
.site-content-contain {
    background-color: platinum;
}

    Do this:

    
.site-content-contain {
    background-color: transparent;
}
    Thread Starter john-biddle

    (@john-biddle)

    Thank-you so much, this was exactly what I wanted.

    Thread Starter john-biddle

    (@john-biddle)

    OK, I spoke too soon. Your code does indeed make the background of the section transparent, and as soon as I saw that I stopped looking, thinking my problem was solved. I was in a rush to see this but was in the middle of something so only gave it a quick glance.

    But each section that now has a transparent background scrolls up over another copy of the topmost image on the page. What I’m looking for is for each section with the transparent background to scroll up over the image that precedes it, the one that belongs to that section.

    So I’d get image 1 and text from section 1 which scrolls up over it. As section 1 text completes, image 2 comes scrolling into position. Then the text in section 2 would scroll up over image 2 and eventually when you reach the bottom of the text, image 3 starts to scroll into place, etc.

    Any ideas?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you show some images to illustrate what you mean? I’m finding it very difficult to understand the problem.

    Thread Starter john-biddle

    (@john-biddle)

    OK, here are 5 images captured as I continue to scroll down:

    1) https://www.screencast.com/t/E7FgW7dB
    2) https://www.screencast.com/t/anH5cxK7
    3) https://www.screencast.com/t/gpIURM9rqf
    4) https://www.screencast.com/t/qJ2FTI77HDUZ
    5) https://www.screencast.com/t/EWroDKxFte

    #1 starts out with home page
    #2 Featured Image of Section 1 coming into view
    #3 Featured Image of Section 1 is fully in place and text of that section begins to scroll up, but NOT over the Featured Image, but it brings the background from the home page with it.
    #4 Featured Image of section 2 is scrolling into view, covering the non-moving background of the home page. The text of section 1 continues to scroll up.
    #5 Featured Image from section 2 is firmly in place and no longer scrolling as the text from section 2 is scrolling up. But it’s NOT scrolling over the featured image of section 2, it’s unveiling the background from the home page again.

    And it keeps going like this. What I am looking to do is scroll the text from each section up and over top of the featured image for that section. Then, when the text section is complete move on to the featured image of the next one.

    I hope this makes it more clear. And I appreciate your working with me on this.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Make parts 2, 3 & 4 etc work like part 1 on the home page’ is closed to new replies.