Jump to content

issues in WP-parallax-theme Twenty Seventeen the free parallax theme

Recommended Posts

hello dear experts,

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. 

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.

The issue: I’m using the Twenty Seventeen theme in WordPress (the newest version) with a static front page with 4 additional sections. On the very top part - at the top of the page, as you scroll down, the logo of the page, and the site name, and tagline scroll up over the opening image appears. 

What is visible: There’s a clear background to the logo, title, tagline group, so the background image shows through very good. The behavior of the site: As you scroll down further, the 2nd image of the page comes into view, and it’s completely displayed when the 1st image of the page 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. 

but wait: However, this text has a white ( at least in my personal case) background and the image does NOT show through.

Why is this so: This is the same behavior for the remaining image/text pairs. 

What is aimed: What I want to know how to do is make the background on those text sections clear, like in the topmost section of the whole page. I’ve seen how their color can be changed, but not how it can be made to be transparent.

well i have read lots of postings here - but i found no answer untill now-... 

Any help would be greatly appreciated.

Share this post

Link to post
Share on other sites

Use rgba() function to specify background color or specify no background color.  


<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
    #main  { padding: 30px;
             width: 400px; 
             background-image: url("https://images.pexels.com/photos/207142/pexels-photo-207142.jpeg");
    .inner { display: inline-block; width: 100px; height: 100px; border: 2px solid yellow; font-size: 40px; text-align: center; margin: 10px; }
    #A     { background-color: #80FF80;}                        /* non-transparent */
    #B     { background-color: rgba(128, 255, 128, 0.5);}       /* semi-transparent */
    #C     { background-color: none; }                          /* transparent */
    <div id="main">
        <div class="inner" id="A">A</div>
        <div class="inner" id="B">B</div>
        <div class="inner" id="C">C</div>


Share this post

Link to post
Share on other sites

hello dear Barand 


many thanks for the reply and  the sharing of ideas and insights. I am glad  to be here at this place. 

Again  - many thanks


have a great day.


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.

  • 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.