Tailwind CSS Background Repeat
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 repeat the background image both horizontally and vertically. It also decides whether the background-image will be repeated or not.
Background Repeat Classes:
- bg-repeat
- bg-no-repeat
- bg-repeat-x
- bg-repeat-y
- bg-repeat-round
- bg-repeat-space
bg-repeat: This class is used to repeat the background image both horizontally and vertically. The last image will be clipped if it is not fit in the browser window.
Syntax:
<element class="bg-repeat">...</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 Repeat Class</b> <div class="bg-green-300 mx-16 space-y-4 p-2 justify-between"> <div class="bg-repeat bg-left-top bg-gree-200 w-full h-32 border-4" style="background-image:url( </div> </div> </body> </html> |
Output:
bg-no-repeat: This class is used to not repeat the background image both horizontally and vertically.
Syntax:
<element class="bg-no-repeat">...</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 no Repeat Class</b> <div class="bg-green-300 mx-16 space-y-4 p-2 justify-between"> <div class="bg-no-repeat bg-left-top bg-gree-200 w-full h-32 border-4" style="background-image:url( </div> </div> </body> </html> |
Output:
bg-repeat-x: This class is used to repeat the background image both horizontally.
Syntax:
<element class="bg-repeat-x">...</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 Repeat X Class</b> <div class="bg-green-300 mx-16 space-y-4 p-2 justify-between"> <div class="bg-repeat-x bg-left-top bg-gree-200 w-full h-32 border-4" style="background-image:url( </div> </div> </body> </html> |
Output:
bg-repeat-y: This class is used to repeat the background image both vertically.
Syntax:
<element class="bg-repeat-y">...</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 Repeat Y Class</b> <div class="bg-green-300 mx-16 space-y-4 p-2 justify-between"> <div class="bg-repeat-y bg-left-top bg-gree-200 w-full h-32 border-4" style="background-image:url( </div> </div> </body> </html> |
Output:
bg-repeat-round: This class is used to repeat the image in a manner that will fit the container without any extra space between images.
Syntax:
<element class="bg-repeat-round">...</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 Repeat Round Class</b> <div class="bg-green-300 mx-16 space-y-4 p-2 justify-between"> <div class="bg-repeat-round bg-left-top bg-gree-200 w-full h-32 border-4" style="background-image:url( </div> </div> </body> </html> |
Output:
bg-repeat-space: This class is used to repeat the image in a manner that will fit the container with the required extra space between images.
Syntax:
<element class="bg-repeat-space">...</element>
Example:
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Background Repeat Space Class</b> <div class="bg-green-300 mx-16 space-y-4 p-2 justify-between"> <div class="bg-repeat-space bg-left-top bg-gree-200 w-full h-32 border-4" style="background-image:url( </div> </div> </body> </html> |
Output:
Please Login to comment...