Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Background Position

Quiz

Tailwind CSS Background Position is a utility that specifies from where the background image will be positioned within an element.

Tailwind CSS Background Position Classes

The following is the list of Tailwind CSS Background Position Classes that are used to set the position of a background.

Class	CSS Properties
bg-bottom	background-position: bottom;
bg-center	background-position: center;
bg-left	background-position: left;
bg-left-bottom	background-position: left bottom;
bg-left-top	background-position: left top;
bg-right	background-position: right;
bg-right-bottom	background-position: right bottom;
bg-right-top	background-position: right top;
bg-top	background-position: top;

Functionality of Tailwind CSS Background Position Classes

bg-bottom: This class is used to position the background image at the bottom.
bg-center: This class is used to position the background image at the center.
bg-left: This class is used to position the background image at the left.
bg-left-bottom: This class is used to position the background image at the left-bottom.
bg-left-top: This class is used to position the background image at the left top.
bg-right: This class is used to position the background image at the right.
bg-right-bottom: This class is used to position the background image at the right-bottom.
bg-right-top: This class is used to position the background image at the right-top.
bg-top: This class is used to position the background image at the top.

Tailwind CSS Background Position Examples

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

Bottom Alignment Of Background Image

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

Example

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

<body class="p-3">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Bottom Class
    </h2>
    <div class="w-5/6 h-48 border-2 relative">
        <img src=
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0" 
                class="w-full h-full object-cover 
                    opacity-30">
        <div class="w-36 h-28 border-2 bg-bottom 
                    absolute bottom-0 left-28" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0')"
        >
        </div>
    </div>
</body>

</html>

Center Alignment Of Background Image

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

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-3">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Center Class
    </h2>
    <div class="w-5/6 h-48 border-2 relative">
        <img src=
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0" 
                class="w-full h-full object-cover 
                    opacity-30">
        <div class="w-36 h-28 border-2 bg-center 
                    absolute bottom-10 left-28" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0')"
        >
        </div>
    </div>
</body>

</html>

Left Alignment Of Background Image

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

Example

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

<body class="p-3">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Left Class
    </h2>
    <div class="w-5/6 h-48 border-2 relative">
        <img src=
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0" 
                class="w-full h-full object-cover 
                    opacity-30">
        <div class="w-36 h-28 border-2 bg-left 
                    absolute bottom-10 left-0" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0')"
        >
        </div>
    </div>
</body>

</html>

Left Bottom Alignment Of Background Image

The below example illustrates the use of bg-left-bottom class.

Example

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

<body class="p-3">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Left Bottom Class
    </h2>
    <div class="w-5/6 h-48 border-2 relative">
        <img src=
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0" 
                class="w-full h-full object-cover 
                    opacity-30">
        <div class="w-36 h-28 border-2 bg-left-bottom
                    absolute bottom-0 left-0" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0')"
        >
        </div>
    </div>
</body>   

</html>

Left Top Alignment Of Background Image

The below example illustrates the use of bg-left-top class.

Example

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

<body class="p-3">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Left top Class
    </h2>
    <div class="w-5/6 h-48 border-2 relative">
        <img src=
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0" 
                class="w-full h-full object-cover 
                    opacity-30">
        <div class="w-36 h-28 border-2 bg-left-top
                    absolute top-0 left-0" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0')"
        >
        </div>
    </div>
</body>

</html>

Right Alignment Of Background Image

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

Example

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

<body class="p-3">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Right Class
    </h2>
    <div class="w-5/6 h-48 border-2 relative">
        <img src=
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0" 
                class="w-full h-full object-cover 
                    opacity-30">
        <div class="w-36 h-28 border-2 bg-right
                    absolute top-10 right-0" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0')"
        >
        </div>
    </div>
</body>

</html>

Right Bottom Alignment Of Background Image

The below example illustrates the use of bg-right-bottom class.

Example

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

<body class="p-3">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Right Bottom Class
    </h2>
    <div class="w-5/6 h-48 border-2 relative">
        <img src=
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0" 
                class="w-full h-full object-cover 
                    opacity-30">
        <div class="w-36 h-28 border-2 bg-right-bottom
                    absolute bottom-0 right-0" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0')"
        >
        </div>
    </div>
</body>

</html>

Right Top Alignment Of Background Image

The below example illustrates the use of bg-right-top class.

Example

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

<body class="p-3">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Right Top Class
    </h2>
    <div class="w-5/6 h-48 border-2 relative">
        <img src=
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0" 
                class="w-full h-full object-cover 
                    opacity-30">
        <div class="w-36 h-28 border-2 bg-right-top
                    absolute top-0 right-0" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0')"
        >
        </div>
    </div>
</body>

</html>

Top Alignment Of Background Image

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

Example

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

<body class="p-3">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Bg Top Class
    </h2>
    <div class="w-5/6 h-48 border-2 relative">
        <img src=
"https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0" 
                class="w-full h-full object-cover 
                    opacity-30">
        <div class="w-36 h-28 border-2 bg-top
                    absolute top-0 left-24" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/3594/course_3594_image.jpg?v=1.0')"
        >
        </div>
    </div>
</body>

</html>

Print Page