Background Parallax Image Fix in Sliders or Content

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;
}

Contact Us To Find Out More

Have questions? Need help? Contact us and we'll be in touch soon!

* Required

Beacon
164 Thatcher Road
Greensboro, NC 27409
Map and Directions

Sales & Marketing
336.232.5687