how can i add background image parallax scroll effect using tailwind css?

user_17210645 0
Viewed 313

here is the code sample I am working on. I need to add a parallax scroll effect to the background image. I tried background-attachment: fixed, but this is just a fixed background. I want to add some transform or zoom effect as usually parallax have.

<body>
<nav>
    <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
    </ul>
</nav>
<div class="bg-image"><!-- this div have background-image set and needs to be parallax -->
    <div class="content"> <!-- This is the normal content that needs to be over background image -->
        
    </div>
</div>

<div class="bg-image"><!-- this div have background-image set and needs to be parallax -->
    <div class="content"> <!-- This is the normal content that needs to be over background image -->
        
    </div>
</div></body>
parallax tailwind-css css html
1 Answers
<body>
<nav>
    <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
    </ul>
</nav>

<UPDATED>
<div class="flex items-center justify-center h-screen mb-12 bg-fixed bg-center bg-cover bg-image"><!-- this div have background-image set and needs to be parallax -->
</div>

<UPDATED content div>
<div class="content"> <!-- This is the normal content that needs to be over background image --> 
    </div>

<UPDATED>
<div class="flex items-center justify-center h-screen mb-12 bg-fixed bg-center bg-cover bg-image"><!-- this div have background-image set and needs to be parallax -->
</div>

 <UPDATED content div>
 <div class="content"> <!-- This is the normal content that needs to be over background image -->  
    </div>
user_165445880
Related