Pure CSS Parallax Scrolling Effect

Category: Animation , CSS & CSS3 , Recommended | March 10, 2015
Author: JohnrBell
Views Total: 20,849 views
Official Page: Go to website
Last Update: March 10, 2015
License: MIT


Pure CSS Parallax Scrolling Effect


A simple pure CSS solution to create subtle parallax effects on Html elements when scrolling the web page.

How to use it:

Create a fixed background with some parallax text.

<div id="title" class="section header">
  <h1>Some text...</h1>

Setup the parallax scrolling effect in CSS.

html {
  height: 100%;
  overflow: hidden;

body { 
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  perspective: 1px;

.section {
  position: relative;
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
  background: 50% 50% / cover;

#title {
  background-image: url("background.jpg");
  background-attachment: fixed;

You Might Be Interested In:

One thought on “Pure CSS Parallax Scrolling Effect

  1. arkhamDev

    I’ve been looking for this for a while and your solution is easier to implement great job


Leave a Reply