How To Make Two Seamless Parallax Background Images Css

Introduction

Modern CSS is a powerful tool yous tin utilize to create many advanced User Interface (UI) features. In the past, these features relied on JavaScript libraries.

In this guide, y'all will set a few CSS lines to create a scrolling parallax consequence on a web page. You volition use images from placekitten.com equally placeholder groundwork images.

You volition take a webpage with a pure CSS scrolling parallax effect once yous've completed the tutorial.

Warning: This article uses experimental CSS properties that practise non work beyond browsers. This project has been tested and works on Chrome. This technique doesn't piece of work well in Firefox, Safari, and iOS due to some of those browsers' optimizations.

Footstep ane — Creating a New Project

In this pace, use the control line to gear up a new project folder and files. To start, open your final and create a new project folder.

Type the post-obit command to create the project folder:

                                                    mkdir                css-parallax

In this case, yous called the folder css-parallax. Now, change into the css-parallax folder:

                                                    cd                css-parallax

Next, create an index.html file in your css-parallax binder with the nano command:

                                                    nano                index.html

You will put all the HTML for the projection in this file.

In the next step, yous will start creating the construction of the webpage.

Step 2 — Setting Up the Application Structure

In this step, you will add together the HTML needed to create the structure of the project.

Inside your index.html file add the following code:

css-parallax/index.html

                                    <!              DOCTYPE              html              >                                                      <html              lang                              =                "en"                            >                                                      <head              >                                                      <meta              charset                              =                "UTF-8"                            />                                                      <meta              proper name                              =                "viewport"                            content                              =                "width=device-width, initial-scale=1.0"                            />                                                      <title              >            CSS Scrolling Parallax                              </title              >                                                      </head              >                                                      <body              >                                                      </trunk              >                                                      </html              >

This is the basic construction of almost webpages that employ HTML.

Add the following code inside the <body> tag:

          [label css-parallax/index.html]                                          <body              >                        ...                                          <master              >                                                      <section              grade                              =                "department parallax bg1"                            >                                                      <h1              >            Cute Kitten                              </h1              >                                                      </section              >                                                      <section              class                              =                "section static"                            >                                                      <h1              >            Tiresome                              </h1              >                                                      </section              >                                                      <section              class                              =                "section parallax bg2"                            >                                                      <h1              >            Fluffy Kitten                              </h1              >                                                      </department              >                                                      </main              >                        ...                                          </trunk              >

This code creates three different sections. Two will have a groundwork image, and i will be a static, plain background.

In the adjacent few steps, you volition add the styles for each section using the classes you added in the HTML.

Step 3 — Creating a CSS File and Adding Initial CSS

In this step, you lot will create a CSS file. Then you will add in the initial CSS needed to style the website and create the parallax effect.

First, create a styles.css file in your css-parallax binder with the nano control:

                                                    nano                styles.css

This is where you lot will put all of the CSS needed to create the parallax scrolling effect.

Next, commencement with the .wrapper class. Inside your styles.css file add the following code:

                      [label css-parallax/styles.css]  .wrapper            {            acme            :            100vh;            overflow-ten            :            hidden;            overflow-y            :            auto;            perspective            :            2px;            }

The .wrapper class sets the perspective and scroll properties for the whole page.

The height of the wrapper needs to be set to a fixed value for the consequence to work. You can use the viewport unit vh set to 100 to get the full elevation of the screen's viewport.

When you lot scale the images, they will add together a horizontal scrollbar to the screen, so you can disable it by adding overflow-10: hidden;. The perspective property simulates the distance from the viewport to the pseudo-elements you volition create and transform further down in the CSS.

In the side by side step, you will add more CSS to fashion your webpage.

Step four — Adding Styles for the `.department` Class

In this pace, you will add styles to the .section class.

Within your styles.css file add the post-obit code below the wrapper form:

css-parallax/styles.css

                      .wrapper            {            height            :            100vh;            overflow-ten            :            hidden;            perspective            :            2px;            }                          .section              {                                      position              :              relative;                                      height              :              100vh;                                      display              :              flex;                                      align-items              :              center;                                      justify-content              :              center;                                      colour              :              white;                                      text-shadow              :              0 0 5px #000;                                      }

The .section form defines the size, display, and text backdrop for the main sections.

Gear up a position of relative so that the child, .parallax::after can exist admittedly positioned relative to the parent element .section.

Each department has a view-elevation(vh) of 100 to have up the viewport's full acme. This value tin can be inverse and prepare to whatsoever height y'all prefer for each section.

Finally, the remainder CSS properties are used to format and add styling to the text inside each section. Information technology positions the text in the center of each section and adds a color of white.

Next, y'all will add a pseudo-element and style it to create the parallax effect on two of the sections in your HTML.

Step 5 — Calculation Styles for the `.parallax` Grade

In this stride, you will add the styles to the .parallax class.

First, you lot will add together a pseudo-chemical element on the .parallax class to be styled.

Notation: You tin visit MDN web docs to acquire more about CSS pseudo-elements.

Add the following code below the .department class:

css-parallax/styles.css

                      ...  .section            {            position            :            relative;            height            :            100vh;            brandish            :            flex;            align-items            :            heart;            justify-content            :            heart;            color            :            white;            text-shadow            :            0 0 5px #000;            }                          .parallax::subsequently              {                                      content              :              " "              ;                                      position              :              absolute;                                      pinnacle              :              0;                                      correct              :              0;                                      bottom              :              0;                                      left              :              0;                                      transform              :              translateZ              (-1px)              calibration              (1.5)              ;                                      background-size              :              100%;                                      z-alphabetize              :              -1;                                      }                        ...

The.parallax class adds an ::later on pseudo-element to the background image and provides the transforms needed for the parallax effect.

The pseudo-chemical element is the last child of the chemical element with the class .parallax.

The first half of the lawmaking displays and positions the psuedo-element. The transform property moves the pseudo-element dorsum abroad from the photographic camera on the z-alphabetize, then scales it back up to fill up the viewport.

Because the pseudo-element is further away, information technology appears to move more slowly.

In the next footstep, yous will add in the background images and static background mode.

Pace 6 — Adding the Images and Background For Each Section

In this step, you will add the final CSS properties to add in the groundwork images and background color of the static section.

First, add a solid background color to the .static section with the following code after the .parallax::subsequently grade:

css-parallax/styles.css

                      ...  .parallax::afterward            {            content            :            " "            ;            position            :            accented;            elevation            :            0;            right            :            0;            bottom            :            0;            left            :            0;            transform            :            translateZ            (-1px)            scale            (1.5)            ;            background-size            :            100%;            z-index            :            -one;            }                          .static              {                                      groundwork              :              red;                                      }                        ...

The .static class adds a background to the static section that does not have an image.

The two sections with the .parallax class besides take an extra course that is different for each. Apply the .bg1 and .bg2 classes to add the Kitten background images.

Add the following code to the .static class:

css-parallax/styles.css

                      ...  .static            {            groundwork            :            red;            }                          .bg1::after              {                                      background-image              :                              url                (                'https://placekitten.com/yard/900/700'                )                            ;                                      }                                      .bg2::after              {                                      background-image              :                              url                (                'https://placekitten.com/g/800/600'                )                            ;                                      }                        ...

The .bg1, .bg2 classes add the respective background images for each section.

The images are from the placekitten website. It is a service for getting pictures of kittens for use equally placeholders.

Now that all of the lawmaking for the parallax scrolling issue is added, yous can link to your styles.css file in your index.html.

Stride seven — Linking `styles.css` and Opening `index.html` in Your Browser

In this step, y'all will link your styles.css file and open up the projection in your browser to encounter the parallax scrolling effect.

Start, add together the post-obit lawmaking to the <head> tag in the alphabetize.html file:

          [label css-parallax/index.html] ...                                          <caput              >                                                      <meta              charset                              =                "UTF-8"                            />                                                      <^              >                                                      <link              rel                              =                "stylesheet"                            href                              =                "styles.css"                            />                                                      <^              >                                                      <meta              proper noun                              =                "viewport"                            content                              =                "width=device-width, initial-calibration=1.0"                            />                                                      <title              >            CSS Parallax                              </title              >                                                      </caput              >                        ...

At present, you lot can open your index.html file in your browser:

Scrolling parallax effect gif

With that, yous accept prepare up a performance webpage with a scrolling outcome. Check out this GitHub repository to see the full code.

Determination

In this commodity, you prepare a projection with an alphabetize.html and styles.css file and now have a functional webpage. You added in the construction of your webpage and created styles for the various sections on the site.

It'south possible to put the images you utilise or the parallax upshot further abroad so that they move more slowly. Y'all'll accept to change the pixel amount on perspective and the transform properties. If you don't desire a background paradigm to scroll at all, utilize background-zipper: fixed; instead of perspective/translate/scale.