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=
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=
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=
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=
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=
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:
