As I work on a standard WordPress website for a client, the designer has requested a subtle layer with SVG elements to be incorporated. This layer should scroll "over the normal content" parallax-style.
The existing content is basic HTML with relative/static positioning. I am aiming to overlay a specific DOM node styled with CSS above the entire content. When scrolling through the regular page content, this layer should also scroll in a parallax effect.
I've explored tutorials such as this one, but have been unable to achieve the desired outcome so far without resorting to JS methods or sticking strictly to CSS-only approaches.
The current implementation (note: the link to the SVG image is not functional):
#primary {
perspective: 1px;
}
.parallax {
position: absolute;
z-index: 5;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
transform: translateZ(-1px) scale(2);
background-size: cover;
background-repeat: no-repeat;
background-image: url('img/svgs/parallax-contrast.svg')
}<html>
<head>
</head>
<body>
<div id="primary" class="content-area">
<main id="main" class="site-main">
<div class="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed ...
[...]
</div>
</main>
<div class="parallax"></div>
</div>
</body>
</html>