Tailwind CSS Parallax effect

Background Attachment Fixed

Use bg-fixed to fix the background image relative to the viewport.

Majestic peaks, nature's embrace.

Adventure calls, conquer mountain trails.

In the realm of towering mountains, where the air is crisp and the vistas stretch endlessly, one finds solace, exhilaration, and a profound connection with the untamed beauty of the natural world.

As the sun rises over the rugged peaks, casting a golden glow on the majestic landscape, a sense of awe fills the heart, reminding us of the grandeur and power that reside in the mountains.

HTML

        
            
        <div
          class="mx-auto h-80 max-w-lg overflow-y-scroll bg-cover bg-fixed bg-center bg-no-repeat shadow-lg"
          style="background-image:url('https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp');">
          <div class="mt-40">
            <div class="bg-white p-4 sm:p-8">
              <div
                class="font-inter text-2xl font-extrabold tracking-tight text-black">
                Majestic peaks, nature's embrace.
              </div>
              <div class="mt-1 text-sm font-medium text-slate-500">
                Adventure calls, conquer mountain trails.
              </div>
              <p class="mt-4 leading-7 text-slate-500">
                In the realm of towering mountains, where the air is crisp and
                the vistas stretch endlessly, one finds solace, exhilaration,
                and a profound connection with the untamed beauty of the natural
                world.
              </p>
              <p class="mt-4 leading-7 text-slate-500">
                As the sun rises over the rugged peaks, casting a golden glow on
                the majestic landscape, a sense of awe fills the heart,
                reminding us of the grandeur and power that reside in the
                mountains.
              </p>
            </div>
          </div>
        </div>

Local

Use bg-local to scroll the background image with the container and the viewport.

Majestic peaks, nature's embrace.

Adventure calls, conquer mountain trails.

In the realm of towering mountains, where the air is crisp and the vistas stretch endlessly, one finds solace, exhilaration, and a profound connection with the untamed beauty of the natural world.

As the sun rises over the rugged peaks, casting a golden glow on the majestic landscape, a sense of awe fills the heart, reminding us of the grandeur and power that reside in the mountains.

HTML

        
            
        <div
          class="mx-auto h-80 max-w-lg overflow-y-scroll bg-cover bg-local shadow-lg"
          style="background-image:url('https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp');">
          <div class="mt-20 p-4 sm:p-8 ">
            <div class="font-serif text-2xl text-base italic text-white">
              Majestic peaks, nature's embrace.
            </div>
            <div
              class="mt-1 font-serif text-base text-sm font-medium italic  text-white">
              Adventure calls, conquer mountain trails.
            </div>
            <p class="mt-4 font-serif text-base italic leading-7 text-white">
              In the realm of towering mountains, where the air is crisp and the
              vistas stretch endlessly, one finds solace, exhilaration, and a
              profound connection with the untamed beauty of the natural world.
            </p>
            <p class="mt-4 font-serif text-base italic leading-7 text-white">
              As the sun rises over the rugged peaks, casting a golden glow on
              the majestic landscape, a sense of awe fills the heart, reminding
              us of the grandeur and power that reside in the mountains.
            </p>
          </div>
        </div>

Scroll

Use bg-scroll to scroll the background image with the viewport, but not with the container.

Majestic peaks, nature's embrace.

Adventure calls, conquer mountain trails.

In the realm of towering mountains, where the air is crisp and the vistas stretch endlessly, one finds solace, exhilaration, and a profound connection with the untamed beauty of the natural world.

As the sun rises over the rugged peaks, casting a golden glow on the majestic landscape, a sense of awe fills the heart, reminding us of the grandeur and power that reside in the mountains.

HTML

        
            
        <div
          class="mx-auto h-80 max-w-lg overflow-y-scroll bg-cover bg-scroll bg-bottom bg-no-repeat shadow-lg"
          style="background-image:url('https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp');">
          <div class="mt-20 p-4 sm:p-8 ">
            <div class="font-serif text-2xl text-base italic text-white">
              Majestic peaks, nature's embrace.
            </div>
            <div
              class="mt-1 font-serif text-base text-sm font-medium italic  text-white">
              Adventure calls, conquer mountain trails.
            </div>
            <p class="mt-4 font-serif text-base italic leading-7 text-white">
              In the realm of towering mountains, where the air is crisp and the
              vistas stretch endlessly, one finds solace, exhilaration, and a
              profound connection with the untamed beauty of the natural world.
            </p>
            <p class="mt-4 font-serif text-base italic leading-7 text-white">
              As the sun rises over the rugged peaks, casting a golden glow on
              the majestic landscape, a sense of awe fills the heart, reminding
              us of the grandeur and power that reside in the mountains.
            </p>
          </div>
        </div>

Parallax effect

Background Attachment Fixed

Local

Scroll

Access restricted

To view this section you must have an active PRO account

Parallax effect

Tailwind CSS Parallax effect

Background Attachment Fixed

Local

Scroll

Related resources