Tailwind CSS Background Attachment
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( )"> </ 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( < 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( )"> < div class = "h-64 w-64" ></ div > </ div > </ div > </ body > </ html > |
Output:

bg-scroll
Please Login to comment...