Tailwind CSS Background Position
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.
Output: You can hover on the output image, each image will show its background-position in the tooltip.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!
Share your thoughts in the comments
Please Login to comment...