Tailwind CSS - Background Position

Previous
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
Previous
Next
Advertisements