Background Parallax Image Fix in Sliders or Content

Beacon Blog Article

By Zedric Myers | Published June 4, 2019 | Categories: Web Development

If your project requires parallax background images, you'll want to keep this note in mind. If your slider or content area that the parallax resides in has a 3D transform attached, you'll want to remove that code for the background parallax image to properly work. You'll notice it works well in Chrome and Safari before doing this, but other browsers such as Edge and Firefox would not properly work.

Example code to update:

.parent {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}

.sibling {
background-attachment: fixed;
}

Recent Posts

Beaconville booth with Kent and Emily
Hello from Beaconville: High Ed Conference Wrap-Up View this Story
Confetti and Balloons
Cue the Confetti: Celebrating 2022's Higher Ed Wins So Far View this Story
Beach scene with Beacon logo
Beacon Technologies Opens Second Location in Carolina Beach, NC View this Story
outline of person sitting at computer and cheering
Why You Need Audience Personas For Your Website Content View this Story

Let's get to work!

Contact Us