Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
206 views

Create Web Parallax Effects

The document explains how to create a parallax scrolling effect with CSS. It describes using a container element with a background image and setting the height and background properties to achieve the parallax effect. It also provides examples using pixel and percentage heights and discusses disabling the effect on mobile devices.

Uploaded by

Rohan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
206 views

Create Web Parallax Effects

The document explains how to create a parallax scrolling effect with CSS. It describes using a container element with a background image and setting the height and background properties to achieve the parallax effect. It also provides examples using pixel and percentage heights and discusses disabling the effect on mobile devices.

Uploaded by

Rohan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

7/3/2019 How To Create a Parallax Scrolling Effect

w3schools.com

  HTML CSS MORE  

How TO - Parallax Scrolling


❮ Previous Next ❯

Learn how to create a "parallax" scrolling effect with CSS.

Parallax
Parallax scrolling is a web site trend where the background content (i.e. an image) is
moved at a different speed than the foreground content while scrolling. Click on the links
below to see the difference between a website with and without parallax scrolling.

Demo with parallax scrolling

Demo without parallax scrolling

Note: Parallax scrolling does not always work on mobile devices/smart phones.
However, you can use media queries to turn off the effect on mobile devices (see last
example on this page).

How To Create a Parallax Scrolling Effect


Use a container element and add a background image to the container with a specific
height. Then use the background-attachment: fixed to create the actual parallax
effect. The other background properties are used to center and scale the image perfectly:

https://www.w3schools.com/howto/howto_css_parallax.asp 1/6
7/3/2019 How To Create a Parallax Scrolling Effect

Example with pixels

<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");

/* Set a specific height */


height: 500px;

/* Create the parallax scrolling effect */


background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>

<!-- Container element -->


<div class="parallax"></div>

Try it Yourself »

The example above used pixels to set the height of the image. If you want to use percent,
for example 100%, to make the image fit the whole screen, set the height of the parallax
container to 100%. Note: You must also apply height: 100% to both <html> and
<body>:

Example with percent

body, html {
height: 100%;
}

.parallax {
/* The image used */
background-image: url("img_parallax.jpg");

/* Full height */
height: 100%;

https://www.w3schools.com/howto/howto_css_parallax.asp 2/6
7/3/2019 How To Create a Parallax Scrolling Effect

/* Create the parallax scrolling effect */


background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

Try it Yourself »

Some mobile devices have a problem with background-attachment: fixed . However,


you can use media queries to turn off the parallax effect for mobile devices:

Example

/* Turn off parallax scrolling for all tablets and phones.


Increase/decrease the pixels if needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}

Try it Yourself »

❮ Previous Next ❯

COLOR PICKER

HOW TO

https://www.w3schools.com/howto/howto_css_parallax.asp 3/6
7/3/2019 How To Create a Parallax Scrolling Effect

Tabs
Dropdowns
Accordions
Side Navigation
Top Navigation
Modal Boxes
Progress Bars
Parallax
Login Form
HTML Includes
Google Maps
Range Sliders
Tooltips
Slideshow
Filter List
Sort List

SHARE

 

CERTIFICATES
HTML
CSS
JavaScript
SQL
Python
PHP
jQuery
Bootstrap
XML

Read More »

REPORT ERROR

PRINT PAGE
https://www.w3schools.com/howto/howto_css_parallax.asp 4/6
7/3/2019 How To Create a Parallax Scrolling Effect

FORUM

ABOUT

Top Tutorials
HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP 5 Tutorial
PHP 7 Tutorial
jQuery Tutorial
Java Tutorial

Top References
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
jQuery Reference
Angular Reference
Java Reference

Top Examples
HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
jQuery Examples
Java Examples
XML Examples

Web Certificates
HTML Certificate
CSS Certificate
JavaScript Certificate
SQL Certificate

https://www.w3schools.com/howto/howto_css_parallax.asp 5/6
7/3/2019 How To Create a Parallax Scrolling Effect

Python Certificate
jQuery Certificate
PHP Certificate
Bootstrap Certificate
XML Certificate

Get Certified »

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and
basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot
warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of
use, cookie and privacy policy. Copyright 1999-2019 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.

https://www.w3schools.com/howto/howto_css_parallax.asp 6/6

You might also like