Faster PHP Cloud Hosting

Parallax scrolling is currently a web site trend. Many of you developers might be curious to know how to create a parallax scrolling website. Therefore my today’s post is a quick tutorial for you to learn to create a website with parallax scrolling effect.

What is Parallax?

Parallax is a web design technique where the background image is moved at the different speed than the foreground. This effect is known as parallax scrolling effect.

How to Create A Parallax Scrolling Website

A Quick Walk Through

Firstly, we need to use a container of a specific height and add a background image for to it. Then use the background-attachment property and set it to fixed to create the parallax scrolling effect. Later we will use other CSS background properties to position the background image.

This was a quick walk through what you need to do to create the parallax effect.

Let’s Get Started

So our first step is to create a container

<div id="myparallax"> </div> 

Next, we need to define the height of the container and also add a background image to it.


/* you can change the height to whatever you want */

height : 500px ;

/* add the url of your background image here */

backgroud-image : url("myimage.jpg") ;


and now comes the real stuff the parallax effect !!.

You can create the parallax effect by adding the background-attachment CSS property to your code, like this –

background-attachment : fixed ;

But that’s not done yet, you still need to add few CSS background properties for giving it a final touch.

Most commonly the following background properties will work out for you but you can also modify them if needed.

These the are the most commonly used CSS background properties for parallax

background-position: center;
background-repeat: no-repeat;
background-size: cover;

Summing Up Everything

So here’s the complete code which you can use to create a parallax scrolling effect for your website.

<style type="text/css">;

/* Background image which will be used */
background-image: url("img_parallax.jpg");

/* Setting An height to the container */
height: 500px;

/*Creaing the Parallax effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;


<!-- The Container&amp;nbsp; -->
<div id="myparallax"></div>


NOTE: You can also set the height of the parallax container to 100%.

Now you may have already got the legendary parallax scrolling effect on your awesome website and you might be really happy but there is one thing which you still need to worry about.

Parallax Scrolling On Mobile Browers

The Problem With Mobile Devices

Most of the mobile browsers don’t support parallax scrolling. Not all of them have the required capabilities to display the background image in parallax.

Therefore you need to use media queries to remove/disable the parallax effect on mobile devices so that your website looks good.

How To Disable Parallax On Mobile Devices

You can use simple media queries to disable/remove the effect on mobile devices i.e you need to set the background-attachment property to scroll

It can be done like this –

/* Disable/remove parallax scrolling for tablets and phones. 
Increase/decrease the number of pixels if needed */
@media only screen and (max-device-width: 1024px){
    background-attachment: scroll;


And that’s it your done setting up parallax on your website and you don’t need to worry about it anymore. In case if you have any problem while adding parallax scrolling to your website feel free to ask me in the comments section below.

Although There are few good CSS Frameworks out there I still prefer to write the code instead of using a css framework . Tell me what you prefer in the comments section below.

If you liked the post and my post helped you please don’t forget to share it with your other developer friends.