Tailwind CSS - Background Position
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>
Advertisements