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>
</div>

Setup the parallax scrolling effect in CSS.

html {
  height: 100%;
  overflow: hidden;
}
body { 
  margin:0;
  padding:0;
  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;
}