Tailwind CSS Background Image - Complete Guide with Examples

Tailwind CSS Background Images

Complete guide to background image utilities, from basic images to complex gradients and positioning

Basic Background Images

Custom Images

Mountain View

Using bg-[url(...)]

<div class="bg-[url('image.jpg')] bg-cover bg-center">

Local Images

Gradient Fallback

bg-[url('/local-image.jpg')]

<div class="bg-[url('/images/hero.jpg')] bg-cover">

Gradient Backgrounds

Linear Gradients

to-r
to-br
to-t

Radial Gradients

Radial
Circle
Conic

Complex Gradients

3 Colors
Custom
With Opacity

Gradient Examples

Linear Gradients:
bg-gradient-to-r from-purple-500 to-pink-500bg-gradient-to-br from-blue-500 to-green-500
Custom Gradients:
bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))]bg-[linear-gradient(45deg,_#ff6b6b,_#4ecdc4)]

Background Positioning & Sizing

Background Position

bg-top
bg-center
bg-bottom
bg-left
bg-right
custom

Background Size

bg-cover
bg-contain
bg-auto
custom size

Advanced Techniques

Multiple Backgrounds

Overlay + Image

Multiple background layers

bg-[linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url('image.jpg')]

Background Blend Modes

Blend Mode

bg-blend-multiply

bg-blue-500 bg-blend-multiply
multiply
screen
overlay
soft-light

Best Practices & Tips

✅ Do's

  • •Use bg-cover for hero sections
  • •Add overlays for better text readability
  • •Optimize images for web (WebP, AVIF)
  • •Use gradients as fallbacks
  • •Consider mobile performance

❌ Don'ts

  • •Don't use huge unoptimized images
  • •Avoid low contrast text on images
  • •Don't forget alt text for accessibility
  • •Avoid too many background layers
  • •Don't ignore loading performance

Complete Examples

Hero Section with Overlay

Welcome to Our Site

Discover amazing experiences

<div class="h-64 bg-[linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('hero.jpg')] bg-cover bg-center">
  <div class="flex items-center justify-center h-full">
    <!-- Content -->
  </div>
</div>

Card with Background Pattern

Pattern Background

Using CSS patterns with Tailwind

<div class="bg-[radial-gradient(circle_at_1px_1px,_rgba(255,255,255,0.15)_1px,_transparent_0)] bg-[length:20px_20px] bg-purple-600">