css parallax effect

Parallax scrolling is one of the most used but overseen web design techniques in css. It makes the background content and foreground content scroll in different speed and creates a scrolling effect that is soothing to your eyes. These days css parallax is mostly seen in wordpress websites only.

Here's a demo.

Add Background Image

The first thing you'll need to add in a css parallax is a background image.

Add Some Content

Add some contents inside the div to get a better result.

Add CSS

.parallax{
	position: relative;
	padding: 200px 15px; 
	color: #fff; 
	background:url(your-image-path);
	background-size:cover; 
	background-repeat: no-repeat; 
	background-position: center; 
	background-attachment: fixed; 
}

Make The Contents Readable

Adding text contents on top of a background image is always a fun. You need to work a little more to make those texts readable. Add the css properties shown below to make it properly readable. Basically, it'll add an extra layer with light opacity on top of the background which makes the content highly visible even on similary colored section of the backgound image.

Add More Css

.parallax:before{ 
	content: ''; 
	position:absolute;
	top:0; 
	left:0; 
	width:100%; 
	height:100%;  
	background: rgba(0,0,0,0.5); 	
}

Wrap The Text Contents in Another Div

Sometimes you may need to wrap the text contents in another div and add css property position:absolute and z-index:1 in case the texts appear below the transparent layer.

To conclude:

Create a div and add a background image to it with background-attachment defined as fixed.

.parallax{
	position: relative;
	padding: 200px 15px; 
	color: #fff; 
	background:url(your-image-path);
	background-size:cover; 
	background-repeat: no-repeat; 
	background-position: center; 
	background-attachment: fixed; 
}

Create another div inside it and add some text contents to make the effect look more appealing.
Improve the readability of the text contents by adding an extra colored background layer on top of the image.

.parallax:before{ 
	content: ''; 
	position:absolute;
	top:0; 
	left:0; 
	width:100%; 
	height:100%;  
	background: rgba(0,0,0,0.5); 	
}

If needed, add css property to the content div for its position and z-index.

.content{
	position: absolute;
	width: 70%;
	z-index: 1;
	top: 30%;
	left: 15%;
}

0 Like 0 Dislike 0 Comment Share Tweet