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.

Author

Designbeep is a design blog dedicated to web developers,bloggers,designers and freelancers.Our aim is to share everything about web design,graphic design,tutorials and inspirational articles and more.