Tailwind CSS - Background Attachment

Previous
Quiz
Next

Tailwind CSS Background Attachment is a utility that specifies the behavior of the background image when scrolled.

Tailwind CSS Background Attachment Classes

The following is the list of Tailwind CSS Background Attachment Classes that are used to set the scrolling behavior of background images.

bg-fixed background-attachment: fixed;
bg-local background-attachment: local;
bg-scroll background-attachment: scroll;

Functionality of Tailwind CSS Background Attachment Classes

  • bg-fixed: This class is used to fix the background image relative to the viewport and disable it from being scrolled.
  • bg-local: This class enables the background image to be scrolled with the container and the viewport.
  • bg-scroll: This class enables the background image to be scrolled with the viewport, but not with the container.

Tailwind CSS Background Attachment Examples

The following example will illustrate the different utility of Background Attachment Classes.

Setting Background Fixed

The below example illustrates the use of bg-fixed class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-2">
    <h2 class="text-2xl mb-3 font-bold">
        Tailwind CSS Background Fixed Class
    </h2>
    <div class="w-5/6 h-72 border-2 overflow-auto">
        <div class="bg-fixed bg-cover w-full h-36 mb-3" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/2868/course_2868_image.jpg?v=1.0)">
        </div>
            HTML is a Standard Markup language for web pages. 
            HTML stands for HyperText Markup Language and is 
            used to create content and structure of any web page. 
            If you think of the human body as a web page then HTML 
            is the skeleton of the body. It is the building block of web pages.
        <br><br>
            HTML was created by Berners-Lee in late 1991 but 
            "HTML 2.0" was the first standard HTML specification
            which was published in 1995. Aim of this tutorial is
            to make you HTML expert by covering each tag and attribute's example codes.
    </div>
</body>

</html>

Setting Background Local

The below example illustrates the use of bg-local class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-3">
    <h2 class="text-2xl mb-3 font-bold">
        Tailwind CSS Background Local Class
    </h2>
        <div class="bg-local bg-cover w-5/6 h-72 mb-3 overflow-auto" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/2868/course_2868_image.jpg?v=1.0)">
            <div class="text-lg p-5 text-yellow-500 font-bold 
                        text-center">
                    HTML is a Standard Markup language for web pages. 
                    HTML stands for HyperText Markup Language and is 
                    used to create content and structure of any web page.
                    If you think of the human body as a web page then HTML
                    is the skeleton of the body. It is the building block
                    of web pages.<br>HTML was created by Berners-Lee
                    in late 1991 but "HTML 2.0" was the first standard HTML
                    specification which was published in 1995. Aim of this 
                    tutorial is to make you HTML expert by covering each tag 
                    and attribute's example codes.<br>HTML was created 
                    by Berners-Lee in late 1991 but "HTML 2.0" was the first
                    standard HTML specification which was published in 1995. 
                    Aim of this tutorial is to make you HTML expert by covering
                    each tag and attribute's example codes.
            </div>
        </div>
</body>

</html>

Setting Background Scroll

The below example illustrates the use of bg-scroll class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-3">
    <h2 class="text-2xl mb-3 font-bold">
        Tailwind CSS Background Scroll Class
    </h2>
        <div class="bg-scroll bg-cover w-5/6 h-72 mb-3 overflow-auto" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/2868/course_2868_image.jpg?v=1.0)">
            <div class="text-lg p-5 text-yellow-500 font-bold 
                        text-center">
                    HTML is a Standard Markup language for web pages. 
                    HTML stands for HyperText Markup Language and is 
                    used to create content and structure of any web page.
                    If you think of the human body as a web page then HTML
                    is the skeleton of the body. It is the building block
                    of web pages.<br>HTML was created by Berners-Lee
                    in late 1991 but "HTML 2.0" was the first standard HTML
                    specification which was published in 1995. Aim of this 
                    tutorial is to make you HTML expert by covering each tag 
                    and attribute's example codes.<br>HTML was created 
                    by Berners-Lee in late 1991 but "HTML 2.0" was the first
                    standard HTML specification which was published in 1995. 
                    Aim of this tutorial is to make you HTML expert by covering
                    each tag and attribute's example codes.
            </div>
        </div>
</body>

</html>
Print Page
Previous
Next