Pure CSS Parallax Scrolling Effect

Category: Animation , CSS & CSS3 , Recommended | March 10, 2015
Views Total:22,115 views
Official Page:Go to website
Last Update:March 10, 2015


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