Tailwind provides comprehensive background utilities covering color, image, gradient, attachment, clip, origin, position, repeat, and size.

Available utilities (bg-{color}-{shade}):

• Any Tailwind color: bg-blue-500, bg-red-100, etc.
• bg-transparent, bg-current, bg-inherit
• With opacity: bg-blue-500/50

Background Image:

• bg-none – No background image
• bg-gradient-to-{direction} – Linear gradient
• Directions: t, tr, r, br, b, bl, l, tl
• Arbitrary: bg-[url('/img/hero.jpg')]

Gradient Color Stops:

• from-{color} – Starting color
• via-{color} – Middle color
• to-{color} – Ending color
• With position: from-10%, via-50%

Background Position (bg-{position}):

• bg-center, bg-top, bg-bottom, bg-left, bg-right
• bg-top-left, bg-top-right, bg-bottom-left, bg-bottom-right

Background Size:

• bg-auto, bg-cover, bg-contain

Background Repeat:

• bg-repeat, bg-no-repeat, bg-repeat-x, bg-repeat-y, bg-repeat-round, bg-repeat-space

Background Attachment:

• bg-fixed – Fixed to viewport (parallax effect)
• bg-local – Scrolls with element content
• bg-scroll – Scrolls with element (default)

Background Clip:

• bg-clip-border – Extends to border edge (default)
• bg-clip-padding – Extends to padding edge
• bg-clip-content – Extends to content edge
• bg-clip-text – Clips to text (for gradient text)

Background Origin:

• bg-origin-border, bg-origin-padding, bg-origin-content