Jump to content
Sign in to follow this  

Wordpress-theming: @media screen breakpoint to ensure the parallax-theme twentysteventeen 

Recommended Posts


hello dear experts


I hope this is the right place for this kind of question. I’m using the Twenty Seventeen theme in WordPress (5.3) with a static front page with 4 additional sections - in short: i run the parallax-theme - with all the config-specs that are needed for this (cf. https://www.wpexplorer.com/parallax-effect-wordpress/ and https://premium.wpmudev.org/blog/twenty-seventeen-wordpress-theme/ )

my setup: On the very top part, as we scroll down, the logo, site name, and tagline scroll up over the opening image. As for the true parallax we have there’s a clear background to the logo, title, tagline group, so the background image shows through. And thats just great.

As we 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. 

And thats just why i am posting here. To be frank - 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.

How can i do some corrections here: can i work with the browser developer tools to discover what element is involved here. well - am i able to adjust the CSS on the fly to see what changes achieve the desired result. How to apply the CSS changes to the style sheet or to custom CSS:


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


i have heard about a so called <strong>css @media screen breakpoint </strong> of 20rem for all smaller screens: this css @media screen breakpoint causes the two column content blocks to collapse into single columns. Furthermore that breakpoint also deactivates a bit of css which gives the parallax effect.

But i do not want to loose the parallax-effect. 

question: can i ensure the effect by copying the portion of css (see below) into either outside of an @media break block or in a custom css file. 

note: for reference, the <strong>css to get the parallax-effect </strong>back is:


.background-fixed .panel-image {
    background-attachment: fixed;

can i work with the above mentioned code to get the parallax-effect back and to ensure that the i have this effect constantly on my page?

note: i am following the parallax-documentation here: 



Parallax effect involves a web page’s background moving at a slower rate than the foreground. This creates an illusion of depth to the page, giving the content a 3D effect as viewers scroll down.

The majority of premium WordPress themes now come with built-in parallax effect on their homepage. Even the free WordPress default theme Twenty Seventeen comes with a parallax feature. Most page builders also incorporate a parallax effect tool, enabling you to add the effect to any page or post on your website. And of course, there are numerous WordPress plugins that you can install to add parallax effect elements to your website.

What Are the Benefits of Using a Parallax Effect?: There are a number of benefits to using a parallax effect on your WordPress website. The first, and most obvious, is the visual aspect of a parallax effect. A parallax effect is aesthetically pleasing, giving your website a fresh, stylish and modern look and feel. This wow effect can make your content really pop, and creates an exciting and interesting browser experience.



love to hear from you 
best regards say 

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.