Skip to content
Related Articles

Related Articles

Improve Article

Tailwind CSS Background Size

  • Last Updated : 25 Feb, 2021

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-size property. This class is used to set the size of the background image.

Background Size classes:

  • bg-auto
  • bg-cover
  • bg-contain

bg-auto: It is used to set the background-size class to its default value. It is used to display the background-image to its original size.

Syntax:

<element class="bg-auto">...</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 Size Space Class</b
    <div class="bg-green-300 
                mx-16 
                space-y-4 
                p-2 
                justify-between"> 
    <div class="bg-no-repeat bg-auto bg-center 
                bg-green-200 w-full h-48 border-2"
         style="background-image:url(
    </div>
  
    </div
</body
</html>

Output:

bg-cover: It is used to resize the background image to cover a whole container element.

Syntax:

<element class="bg-cover">...</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 Size Space Class</b
    <div class="bg-green-300 
                mx-16 
                space-y-4 
                p-2 
                justify-between"> 
    <div class="bg-no-repeat bg-cover bg-center 
                bg-green-200 w-full h-48 border-2"
         style="background-image:url(
    </div>
  
    </div
</body
</html>

Output:

bg-contain: It is used to contain the background image within the container by shrinking.

Syntax:

<element class="bg-contain">...</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 Size Space Class</b
    <div class="bg-green-300 
                mx-16 
                space-y-4 
                p-2 
                justify-between"> 
    <div class="bg-no-repeat bg-contain bg-center 
                bg-green-200 w-full h-48 border-2"
         style="background-image: url(
    </div>
  
    </div
</body
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :