Parallax scrolling effect for background using only CSS

Hello everyone, welcome to my website. In this short and quick tutorial, I'll show you how to create parallax scrolling effect for background using only CSS and HTML.

Creating pure CSS parallax scrolling effect

This is a really simple technique. We will use just a specific CSS property, called background-attachment. Let's create simple HTML structure first. I'll just place some text over parallax background for example.

<div class="parallax">
    <h1 class="parallax__title">This is parallax</h1>
</div>

Now, let's add some styles. I'll highlight the most important property to achieve CSS parallax effect with comment in CSS code.

.parallax {
    background-image: url(bg-image.jpg);
    height: 500px;
    background-attachment: fixed; /* Main property to achieve parallax scroling effect */
    display: flex;
    justify-content: center;
    color: #ffffff;
    font-size: 60px;
    align-items: center;
    position: relative;
}

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

.parallax__title {
    z-index: 2;
}

That's all. You can see what this code doing in the example below.

Pure CSS parallax background example

Here is an example of CSS parallax background: