Fixed Background Effect (CSS, jQuery)

Advertisement

This is a simple template that takes advantage of the background-attachment CSS property to create a fixed background effect.

Today’s snippet comes from Codyhouse.It is all about a single CSS property: background-attachment. You can set the background to be fixed within the viewport (background-attachment: fixed;).

fixed-background-effect-featured-new

Demo    Source

The new trick here is having the same element (in this case a phone) in the exact same position in all background images, so that while you scroll everything moves, but the phone.

The only assets you need are different images, with the same size and an element in common in the same position.