CSS Tutorials

Easy Pure CSS Parallax Effect Tutorial

Parallax effect had been a fad in web and mobile design for quite sometime now. And if you’re reading this article, there’s a big posibility that you are in search of the easiest and fastest way to learn or incorporate this effect on your project.

Well, you are on the right track.

However, for those who are not familiar with ‘parallax’, don’t quit on me just yet. This might turn out to be of help to you too. I’m pretty sure you have already encountered Parallax on your iOS phones, websites or apps. It’s all around us.

As defined by the ever informative Wikipedia, “Parallax scrolling is a technique in computer graphics and web design, where background images move by the camera slower than foreground images, creating an illusion of depth in a 2D scene and adding to the immersion.” 

Just recently, I had some web design projects that requires me to use the effect. And I found this pretty simple and cool way to make it.

Easy Pure CSS Parallax Effect

The CSS code “background-attachment:fixed” does the trick. And that’s basically it.

On the downside, I noticed some problems with implementing it on iOS . But dont you worry. We will be updating this post for a workaround on that.

Way to easy, is it not? Go ahead and try it on your projects.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
The following two tabs change content below.
Mark Vincent del Rosario
Mark is passionate for arts. Dance,design and illustration are just some of the things he enjoys doing. He is currently working as a Web Programmer,but his desire to be creative will always be something at heart.
Mark Vincent del Rosario

Latest posts by Mark Vincent del Rosario (see all)

  • prasad

    wow!!! Nice one..i am glad that i visited your site 🙂

    • thetotobox

      Hi prasad, Glad it helped! 🙂

  • Partha Saradhi Reddy

    Its not a parallax bro.. the background is fixed.. real parallax is when the movement of background is relatively slower than the movement of the foreground.. which means both should be moving at least slightly.

    • Mark Vincent del Rosario

      Well, maybe not as complex as the ‘real parallax’. But if the movement on background is the only difference, then I guess most designers will still consider and benefit from it.

      We should call it ‘semi-parallax’ perhaps?

      Thanks for the comment bro 🙂