Create a Parallax Scrolling Effect with CSS

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


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.

See also  Morphing Hamburger Menu With Pure CSS/CSS3

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;

Leave a Reply

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