search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Migrating to v2
      • Internationalization guide
      • Class customization
      • Icons Integration
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Angular
      • ASP.NET
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • Qwik
      • React
      • Remix
      • Solid
      • Svelte
      • SvelteKit
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Autocomplete
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Multi range slider
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Admin Charts
      • Admin Complex
      • Admin Forms
      • Admin Maps
      • Admin Navigation
      • Admin tables
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Stats admin
      • Team
      • Testimonials
    • Tools
      • Button generator
      • Card generator
      • Flexbox generator
      • Footer generator
      • Form builder
      • Grid generator
      • Icon generator
      • Instagram Filters generator
      • Logo generator
      • Table generator
      • Typography generator
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • Resources
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips
    • Overview
    • Images

    Parallax effect

    Tailwind CSS Parallax effect

    Use the responsive parallax component and control how a background image behaves when scrolling.


    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>
            
            
        

    Related resources

    Scrollspy Images Background image Background position Overflow Overflow hidden Position Center text vertically and horizontally Center text Z-index

    If you are looking for more advanced options, try parallax from MDBootstrap.

    • Fixed
    • Local
    • Scroll
    • Related resources
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2024 Copyright: MDBootstrap.com

    Access restricted

    To view this section you must have an active PRO account

    Log in to your account or purchase an TWE subscription if you don't have one.

    Buy TWE PRO