Pure CSS Parallax Scrolling Effect

Author: JohnrBell
Views Total: 21,216 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;

See also  Simpsons Characters In Pure CSS

Leave a Reply

Your email address will not be published. Required fields are marked *