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-image property. This class is used to set one or more background images to an element. By default, it places the image on the top left corner. To specify two or more images, separate the URLs with a comma.
Background Image classes:
- bg-none: This class is used not to set any linear-gradient.
- bg-gradient-to-t: This class is used to set the linear-gradient to the top.
- bg-gradient-to-tr: This class is used to set the linear-gradient to the top right.
- bg-gradient-to-r: This class is used to set the linear-gradient to right.
- bg-gradient-to-br: This class is used to set the linear-gradient to the bottom right.
- bg-gradient-to-b: This class is used to set the linear-gradient to the bottom.
- bg-gradient-to-bl: This class is used to set the linear-gradient to the bottom left.
- bg-gradient-to-l: This class is used to set the linear-gradient to left.
- bg-gradient-to-tl: This class is used to set the linear-gradient to the top left.
Syntax:
<element class="bg-gradient-to-{direction}">...</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 Image Class</b>
<div class="mx-4 grid grid-cols-3 gap-2">
<div class="h-12 w-full bg-gradient-to-r rounded-lg
from-yellow-400 via-green-500 to-blue-500">
</div>
<div class="h-12 w-full bg-gradient-to-tr rounded-lg
from-yellow-400 via-green-500 to-blue-500">
</div>
<div class="h-12 w-full bg-gradient-to-br rounded-lg
from-yellow-400 via-green-500 to-blue-500">
</div>
<div class="h-12 w-full bg-gradient-to-b rounded-lg
from-yellow-400 via-green-500 to-blue-500">
</div>
<div class="h-12 w-full bg-gradient-to-bl rounded-lg
from-yellow-400 via-green-500 to-blue-500">
</div>
<div class="h-12 w-full bg-gradient-to-tl rounded-lg
from-yellow-400 via-green-500 to-blue-500">
</div>
<div class="h-12 w-full bg-gradient-to-l rounded-lg
from-yellow-400 via-green-500 to-blue-500">
</div>
</body>
</html>
|
Output:
Tailwind CSS background image