Alternate Fixed and Scroll Backgrounds [CSS only]

Codes

How to create alternate fixed and scroll backgrounds with no javascript, but just the help of the CSS background-attachment property set on fixed. These days we see a lot of parallax effects in web projects. You can achieve some dynamic results with CSS only, without affecting the website performance.

All you need to learn is how the CSS background-attachment property works. By default the background-attachment value is Scroll, meaning that the background scrolls along with the element. BUT if you set it to be Fixed, the background behaves as a fixed positioned element: it moves with regards to the viewport.

codyhouse

 

Share/Like

8