DEV Community

Cover image for Parallex Effect in CSS!
Ustariz Enzo
Ustariz Enzo

Posted on • Edited on

4

Parallex Effect in CSS!

Hey fellow creators,

Learn how to do a parallex effect in CSS in less than a minute!

If you prefer to watch the video version, it's right here :

1. The HTML structure.

Create three sections that contain a title each:

<section class="s1">
    <h2>SECTION 1</h2>
</section>

<section class="s2">
    <h2>SECTION 2</h2>
</section>

<section class="s3">
    <h2>SECTION 3</h2>
</section>
Enter fullscreen mode Exit fullscreen mode

2. Style each section.

Make sure each section takes up the full height of the viewport and that the background covers the whole space and is centered:

section {
    height: 100vh;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

3. Style the titles.

Style the titles however you want, here's how I did it:

section h2 {
    text-align: center;
    background: #F1F1F1;
    padding: 20px;
    font-size: 55px;
    font-weight: 200;
}
Enter fullscreen mode Exit fullscreen mode

4. Add the background images.

Add your assets to a folder and then add them as backgrounds to each section:

.s1{
    background-image: url(imgs/img1.jpg);
}

.s2{
    background-image: url(imgs/img2.jpg);
}

.s3{
    background-image: url(imgs/img3.jpg);
}
Enter fullscreen mode Exit fullscreen mode

5. Add the parallex effect.

In the section styling, add a background-attachment: fixed so that each image are fixed to the background of the different sections.

section {
    background-attachment: fixed;
}
Enter fullscreen mode Exit fullscreen mode

Now if you scroll down your app, you'll see that each image wipes out the one above or below it!

You can now create a simple parallex effect in pure CSS in under a minute ;)

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (2)

Collapse
 
andrewbaisden profile image
Andrew Baisden

The Parallax Effect is so underrated such a great technique!

Collapse
 
ziratsu profile image
Ustariz Enzo

Agreed mate!

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs