Background Parallax Image Fix in Sliders or Content

By | 2019-05-31T14:57:14+00:00 June 4th, 2019|Categories: Web Development|Tags: , , , |

Est. Reading Time: 2 minute

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

About the Author:

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.