Tailwind CSS Background Size
Last Updated :
23 Mar, 2022
Improve
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:
<!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(
https://media.geeksforgeeks.org/wp-content/uploads/20210222231443/Screenshot20210222231435.png)">
</div>
</div>
</body>
</html>
27
1
2
<html> 3
<head> 4
<link href=5
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"6
rel="stylesheet"> 7
</head> 8
9
<body class="text-center"> 10
<h1 class="text-green-600 text-5xl font-bold"> 11
GeeksforGeeks 12
</h1> 13
<b>Tailwind CSS Background Size Space Class</b> 14
<div class="bg-green-300 15
mx-16 16
space-y-4 17
p-2 18
justify-between"> 19
<div class="bg-no-repeat bg-auto bg-center 20
bg-green-200 w-full h-48 border-2"21
style="background-image:url(22
https://media.geeksforgeeks.org/wp-content/uploads/20210222231443/Screenshot20210222231435.png)">23
</div>24
25
</div> 26
</body> 27
</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:
<!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(
https://media.geeksforgeeks.org/wp-content/uploads/20210222231443/Screenshot20210222231435.png)">
</div>
</div>
</body>
</html>
27
1
2
<html> 3
<head> 4
<link href=5
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"6
rel="stylesheet"> 7
</head> 8
9
<body class="text-center"> 10
<h1 class="text-green-600 text-5xl font-bold"> 11
GeeksforGeeks 12
</h1> 13
<b>Tailwind CSS Background Size Space Class</b> 14
<div class="bg-green-300 15
mx-16 16
space-y-4 17
p-2 18
justify-between"> 19
<div class="bg-no-repeat bg-cover bg-center 20
bg-green-200 w-full h-48 border-2"21
style="background-image:url(22
https://media.geeksforgeeks.org/wp-content/uploads/20210222231443/Screenshot20210222231435.png)">23
</div>24
25
</div> 26
</body> 27
</html>Output:
bg-contain: It is used to contain the background image within the container by shrinking.
Syntax:
<element class="bg-contain">...</element>
Example:
<!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(
https://media.geeksforgeeks.org/wp-content/uploads/20210222231443/Screenshot20210222231435.png)">
</div>
</div>
</body>
</html>
27
1
2
<html> 3
<head> 4
<link href=5
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"6
rel="stylesheet"> 7
</head> 8
9
<body class="text-center"> 10
<h1 class="text-green-600 text-5xl font-bold"> 11
GeeksforGeeks 12
</h1> 13
<b>Tailwind CSS Background Size Space Class</b> 14
<div class="bg-green-300 15
mx-16 16
space-y-4 17
p-2 18
justify-between"> 19
<div class="bg-no-repeat bg-contain bg-center 20
bg-green-200 w-full h-48 border-2"21
style="background-image: url(22
https://media.geeksforgeeks.org/wp-content/uploads/20210222231443/Screenshot20210222231435.png)">23
</div>24
25
</div> 26
</body> 27
</html>Output:
