Tailwind CSS Background Image (original) (raw)

Last Updated : 23 Jul, 2025

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:

...

Example:

HTML `

GeeksforGeeks

`

Output:

Tailwind CSS background image