dil_bert Posted November 23, 2019 Share Posted November 23, 2019 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. Quote Link to comment https://forums.phpfreaks.com/topic/309568-issues-in-wp-parallax-theme-twenty-seventeen-the-free-parallax-theme/ Share on other sites More sharing options...
Barand Posted November 23, 2019 Share Posted November 23, 2019 Use rgba() function to specify background color or specify no background color. Example <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Sample</title> <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 */ </style> </head> <body> <div id="main"> <div class="inner" id="A">A</div> <div class="inner" id="B">B</div> <div class="inner" id="C">C</div> <div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/309568-issues-in-wp-parallax-theme-twenty-seventeen-the-free-parallax-theme/#findComment-1571825 Share on other sites More sharing options...
dil_bert Posted December 1, 2019 Author Share Posted December 1, 2019 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. Quote Link to comment https://forums.phpfreaks.com/topic/309568-issues-in-wp-parallax-theme-twenty-seventeen-the-free-parallax-theme/#findComment-1572071 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.