Tailwind CSS Background Size
Last Updated :
23 Mar, 2022
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 =
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 =
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 =
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:
Share your thoughts in the comments
Please Login to comment...