How to Create a Parallax Scrolling Effect with CSS

css
Published on December 10, 2018

Undoubtedly parallax effect gives an elegant look to a webpage. It is actually quite simple to achieve parallax effect with a bit of CSS.

Demo

See the demo here

See the same demo without parallax effect

Download codes for the demo

CSS Involved

The background-attachment: fixed CSS property is the main hero of the effect. This property sets whether the background image is fixed within the browser viewport or scrolling within the container element.

The image is given through the background-image property. Because the element is essentially empty you need to give a specific height to it.

<div id="parallax-background"></div>
#parallax-background {
	background-image: url("robot.jpg");
	height: 800px;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
}
In this Tutorial