Parallax Backround

Code Setup

CSS

.parallax-section {
    color: var(--color);
    width: 100%;
    min-height: 30vh;
    display: flex;
    flex-direction: column;
    background-size: cover;
    background-position: center;
    /*  this is where the magic happens:  */
    background-attachment: fixed;
}

HTML

<style type="text/css">.parallax-section.background {
    background-color: #003DA5;
    background-image: url(https://admissions.ucr.edu/sites/default/files/2024-06/admissions-parallax-background.jpg);
}
</style>

Layout/Classes for Column 1

parallax-section background

Copy the CSS code into your themes "Advanced Options" under "Inline CSS"
Copy the HTML into a custom block "Content" area. This block will container the parallax background
Click into Layout and create a new section and click on "Configure Section #", add this code to the "Classes for Column #"
Note: You can create different backgrounds using a unique name after parallax-section background

Adding text over Parallax Background

You can add text over the Parallax Background by simply adding the text in the same Custom Block you created

This is an example of text over a Parallax Background