How do I implement a parallax main region?

Created on 7 March 2024, 6 months ago
Updated 27 June 2024, 2 months ago

Problem/Motivation

I'm having a problem with understanding and implementation of parallax to a region.
My intent is to set a background on the main region. I use colors for my header/foot/menus so they aren't changing, but the main content region of the front page I want to inplement an image background that gets scrolled over ala parallax.

Looking at the Twig it breaks down into 'partial' and I've not dug this deep before into a theme. I've an image created and ready but
am unclear where to wrap the region with my div. My div is:
<div class="pb__parallax-bg" style="background-image: url( /sites/default/files/styles/pb_original_size/public/pb-media-image/2024-03/vintage_scoresheet_v1.webp?itok=qkagkw9T ); min-height: 450px;"></div>

Can you offer a pointer or direction to pursue?

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

πŸ’¬ Support request
Status

Closed: outdated

Version

1.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States jshimota01 Portland, OR

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024