Open In App

Tailwind CSS Background Position

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

This class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS background-position property. This class is used to set one or more background images to an element. By default, it places the image on the top left corner. To specify two or more images, separate the URLs with a comma.

Background Position Classes:

  • bg-left-top: It is positioned at the left-top of the background.
  • bg-top: It is positioned at the top of the background.
  • bg-right-top: It is positioned at the right-top of the background.
  • bg-left: It is positioned on the left of the background.
  • bg-center: It is positioned at the center of the background.
  • bg-right: It is positioned to the right of the background.
  • bg-left-bottom: It is positioned at the left-bottom of the background.
  • bg-bottom: It is positioned at the bottom of the background.
  • bg-right-bottom: It is positioned at the right-bottom of the background.

Note: All classes are used in the below example.

Syntax:

<element class="bg-{side}">...</element>

Example:

HTML




<!DOCTYPE html> 
<html
<head
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
    rel="stylesheet"
</head
  
<body class="text-center"
    <h1 class="text-green-600 text-5xl font-bold"
    GeeksforGeeks 
    </h1
    <b>Tailwind CSS Background Position Class</b
    <div class="bg-green-300 
                mx-16 
                space-y-4 
                p-2 
                justify-between 
                grid grid-rows-3 
                grid-flow-col"> 
    <div title="bg-left-top"
         class="bg-no-repeat bg-left-top 
                bg-gree-200 w-24 h-24
                border-4 my-4"
         style=
         "background-image:url(
    </div>
    <div title="bg-left"
         class="bg-no-repeat bg-left 
                bg-gree-200 w-24 h-24 
                border-4 my-4"
         style=
         "background-image:url(
    </div>
    <div title="bg-left-bottom"
         class="bg-no-repeat bg-left-bottom 
                bg-gree-200 w-24 h-24 
                border-4 my-4"
         style="background-image:url(
    </div>
    <div title="bg-top"
         class="bg-no-repeat bg-top 
                bg-gree-200 w-24 h-24 
                border-4 my-4"
         style="background-image:url(
    </div>
    <div title="bg-center"
         class="bg-no-repeat bg-center 
                bg-gree-200 w-24 h-24 
                border-4 my-4"
         style="background-image:url(
    </div>
    <div title="bg-bottom"
         class="bg-no-repeat bg-bottom 
                bg-gree-200 w-24 h-24 
                border-4 my-4"
         style="background-image:url(
    </div>
    <div title="bg-right-top"
         class="bg-no-repeat bg-right-top 
                bg-gree-200 w-24 h-24 
                border-4 my-4"
         style="background-image:url(
    </div>
    <div title="bg-right"
         class="bg-no-repeat bg-right 
                bg-gree-200 w-24 h-24
                border-4 my-4"
         style="background-image: url(
    </div>
     <div title="bg-right-bottom"
         class="bg-no-repeat bg-right-bottom 
                bg-gree-200 w-24 h-24
                border-4 my-4"
         style="background-image:url(
     </div>    
    </div
</body
</html>


Output:  You can hover on the output image, each image will show its background-position in the tooltip.

Background position



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads