Tailwind CSS - Backgrounds


Tailwind CSS Backgrounds contain a list of important utility classes that provide simple ways of controlling background size, position, and effective background image alignment. It consists of classes such as background clip, background position, background size, background image, and many more.

Tailwind CSS Backgrounds

Below mentioned topics can be used to effectively apply background on an elements.

Topic Description Example
Tailwind CSS - Background Attachment Background Attachment class is used to specify the behavior of background image when scroll.
Tailwind CSS - Background Clip Background Clip class is used to specify the clipping behavior of background within an element.
Tailwind CSS - Background Color Background Color class is used to specify the Element's Background Color.
Tailwind CSS - Background Origin Background Origin class is used to specify from where the background property originated within an element.
Tailwind CSS - Background Position Background Position class is used to specify from where the background image will be positioned within an element.
Tailwind CSS - Background Repeat Background Repeat class is used to specify the repeating behavior of a background image within an element.
Tailwind CSS - Background Size Background Size class is used to specify the Size of a Background Image.
Tailwind CSS - Background Image Background Image class is used to specify the Background Image of an element.
Tailwind CSS - Gradient Color Stops Gradient Color Stops class is used to specify the color stops in background gradients.

Example of Tailwind CSS Backgrounds

In the following example we will cover some of the above mentioned Transform classes

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="px-8 py-4 bg-teal-100">
    <h2 class="text-xl font-bold mb-3 text-center">
        Tailwind CSS Background Color, Background Clip,
        Background Image, and Gradient Color Stops Example
    </h2>
    <div class="border-2 shadow-2xl rounded-xl w-full h-52
                bg-gradient-to-r from-pink-200 via-sky-200 
                to-rose-200">
        <div class="text-6xl text-center font-extrabold 
                    text-transparent bg-clip-text py-14" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/8654/course_8654_image.png?v=1.0')"
        >
            Tutorialspoint
        </div>
    </div>
</body>
</html>