Tailwind CSS Background Attachment

14 Jul, 2021
In this article, we will learn how to attach background images using Tailwind CSS.
Approach:
You can easily attach background images using the background-attachment property in Tailwind CSS.  All the properties are covered in class form. It is the alternative to the CSS background-attachment property. It can be set to scroll or remain fixed. 
Background attachment classes:
bg-fixed: This class is used to fix the background image relative to the viewport.
bg-local: This class is used to scroll the background image with the container and the viewport.
bg-scroll: This class is used to scroll the background image with the viewport, but not with the container.
 
Syntax:
<div class="bg-fixed ...">
    ...
</div>
Example 1: The following example demonstrates fixing the background image relative to the viewport using the bg-fixed class. 
HTML
<!DOCTYPE html><html>  <head>    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"        rel="stylesheet"></head>  <body class="text-center">    <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>      <b>Tailwind CSS Background Attachment Class</b>          <div class="mx-4  h-screen w-full">        <div class="bg-fixed bg-contain overflow-auto             m-20 h-80 w-38" style="background-image:url(https://media.geeksforgeeks.org/wp-content/uploads/20210603152813/tree276014340-300x191.jpg            )">        </div>    </div></body>  </html>
Output:
bg-fixed
Example 2: The following example demonstrates fixing the background image with the container and the viewport using the bg-local property.
HTML
<!DOCTYPE html><html>  <head>    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"        rel="stylesheet"></head>  <body>      <div class="mx-4  flex items-center         justify-center h-screen w-full">          <div class="bg-local bg-contain             overflow-auto m-20 h-80 w-38"             style="background-image:url(https://media.geeksforgeeks.org/wp-content/uploads/20210603154238/download-200x125.jpeg)">              <div class="h-64 w-64"></div>        </div>    </div></body>  </html>
Output:
bg-local
Example 3: The following example demonstrates fixing the background image with the viewport, but not with the container using the bg-scroll property.
HTML
<!DOCTYPE html><html>  <head>    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"        rel="stylesheet"></head>  <body>      <div class="mx-4  flex items-center         justify-center h-screen w-full">          <div class="bg-scroll bg-contain             overflow-auto m-20 h-60 w-38"             style="background-image:url( https://media.geeksforgeeks.org/wp-content/uploads/20210628092647/bgimage.jpg            )">                          <div class="h-64 w-64"></div>        </div>    </div></body>  </html>
Output:
bg-scroll
Picked
Tailwind CSS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array