Tailwind CSS - Background Size

Previous
Quiz
Next

Tailwind CSS Background Size is a utility that specifies the size of a background image.

Tailwind CSS Background Size Classes

The following is the list of Tailwind CSS Background Size Classes that are used to set the size of a background image.

Class CSS Properties
bg-auto background-size: auto;
bg-cover background-size: cover;
bg-contain background-size: contain;

Functionality of Tailwind CSS Background Size Classes

  • bg-auto: This class is used to set the background image to its default size.
  • bg-cover: This class adjusts the background image to cover the entire container, ensuring no extra space is available.
  • bg-contain: This class adjusts the background image to fit the container without cropping and stretching.

Tailwind CSS Background Size Example

The following example will illustrate the different adjusting ways of a background image.

Default Sizing Of Background Image

The below example illustrates the use of bg-auto 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 Auto Class
    </h2>
    <div class="w-5/6 h-56 border-2 bg-auto bg-no-repeat
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"
    >
    </div>
</body> 

</html>

Setting Background Image to Cover

The below example illustrates the use of bg-cover 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 Cover Class
    </h2>
    <div class="w-5/6 h-56 border-2 bg-cover bg-no-repeat
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"
    >
    </div>
</body> 

</html>

Setting Background Image to Contain

The below example illustrates the use of bg-contain 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 Contain Class
    </h2>
    <div class="w-5/6 h-56 border-2 bg-contain bg-no-repeat
                bg-[url('https://d3mxt5v3yxgcsr.cloudfront.net/courses/4661/course_4661_image.jpg?v=1.0')]"
    >
    </div>
</body> 

</html>
Print Page
Previous
Next