above all': merry merry XMas - i whish you a merry Christmas - !!! `
I’m using the Twenty Seventeen theme in WordPress (5.x) with a static front page with 4 additional sections.
The first thing i did here was to create a few pages:
Create a page to serve as your static homepage.
Create a page to serve as your blog or posts page.
Create up to four additional pages to contain the content that will be displayed in your homepage sections — make it three additional pages if you plan to use your blog or posts page as one of the homepage sections.
In the case of my example website, I created a home page, blog page, about page, services page, and contact page.
Step 2: Add a Featured Image to Each Page
In order to achieve the parallax image effect, you need to add a large featured image to each page that will be part of your front page sections. You will probably not want to add a featured image to the home page you created in the previous step, but you will want to add a featured image to every other page.
see more on this topic here at this page https://premium.wpmudev.org/blog/twenty ... ess-theme/
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.
in a earlier wordpress i have tried this option:
- Code: Select all
.site-content-contain { background-color: transparent; }
but friends of me suggested to have a view on the @media screen breakpoint of 20rem for smaller screens.
It causes the two column content blocks to collapse into single columns.
that breakpoint is told to be active in also deactivating a bit of css which gives the parallax effect.
To bring back the effect, we should copy the portion of css into either outside of an @media break block or in our custom css file. For reference, the css to get the effect back is:
- Code: Select all
.background-fixed .panel-image {
background-attachment: fixed;
}
well i am a bit uncertaion to apply that solution. Sould i do this in a child-theme!?
approach: Well i try to find it out by using the browser developer tools to discover what element is involved.
i think that this way i can then adjust the CSS on the fly to see what changes achieve the desired result.
Once i have that, i try to apply the CSS changes to the style sheet or to custom CSS
Any help would be greatly appreciated.
above all': merry merry XMas - i whish you a merry Christmas - !!! `
regards
unleash
