1

I hope this is the right place for this. I tried WP Developers but question was considered off topic.

I’m using the Twenty Seventeen theme in WordPress (4.8.2) 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 background 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.

1

You need to use your browser developer tools to discover what element is involved. You can then adjust the CSS on the fly to see what changes achieve the desired result. Once you have that, you apply the CSS changes to the style sheet or to custom CSS

| improve this answer | |
  • Thanks for that, you were a big help. This is apparently a complicated page and I cannot find where to make a change that has the desired effect. Only in one place did I find where the background was white, but changing it had no effect. – John Biddle Oct 5 '17 at 23:34
  • Keep going up the level of elements. You can't do any permanent damage in developer tools. If you make a mess, simply reload the page to start afresh – Steve Oct 6 '17 at 5:32
  • 1
    I've found the element that lets me change the background-color to anything I want, but not to none or transparent. Looked for a layer between the image and the div in question, thinking maybe that the transparent worked but only let me see the underlying layer, but couldn't find anything. This is the most complicated theme I've ever seen with way more js than I understand. – John Biddle Oct 7 '17 at 2:55
1

This answer was provided by Andrew Nevins over on the Wordpress.org forums:

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

Simple once you find it.

| improve this answer | |
1

This is an older question, but the css may have changed since answered.

If you run into this issue now. There is an @media screen breakpoint of 20rem for smaller screens. It causes the two column content blocks to collapse into single columns.

However that breakpoint also deactivates a bit of css which gives the parallax effect.

To bring back the effect, copy the portion of css into either outside of an @media break block or in your custom css file. For reference, the css to get the effect back is:

.background-fixed .panel-image {
    background-attachment: fixed;
}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.