Background Images in Tailwind CSS 4 – Complete Guide
Background images are widely used in modern UI design to create:
- hero sections
- banners
- landing pages
- card backgrounds
- website headers
Tailwind CSS provides powerful utilities to control background images, size, position, repeat, and overlays without writing custom CSS.
In this tutorial you will learn:
- How to add background images
- Background size utilities
- Background position
- Background repeat
- Gradient overlays
- Responsive background images
- Real UI examples
We will use the Tailwind CSS 4 CDN.
https://unpkg.com/@tailwindcss/browser@4
Step 1: Setup Tailwind CSS CDN
Create a simple HTML file.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<h1 class="text-3xl font-bold mb-6">
Background Images in Tailwind CSS
</h1>
</body>
</html>
Now Tailwind utilities are ready to use.
Adding Background Image
In Tailwind, you can add a background image using arbitrary values.
Example
<div class="bg-[url('https://picsum.photos/800/400')] h-64 bg-cover bg-center">
</div>
Explanation:
| Class | Purpose |
|---|---|
| bg-[url()] | background image |
| h-64 | height |
| bg-cover | image covers container |
| bg-center | image centered |
Background Size
Tailwind provides utilities to control background image size.
| Class | CSS |
|---|---|
| bg-auto | original size |
| bg-cover | cover entire container |
| bg-contain | fit inside container |
Example – bg-cover
<div class="bg-[url('https://picsum.photos/900/500')] bg-cover bg-center h-64">
</div>
Image covers entire section.
Example – bg-contain
<div class="bg-[url('https://picsum.photos/900/500')] bg-contain bg-center bg-no-repeat h-64">
</div>
Image stays fully visible inside container.
Background Position
Tailwind allows control over image positioning.
| Class | Position |
|---|---|
| bg-center | center |
| bg-top | top |
| bg-bottom | bottom |
| bg-left | left |
| bg-right | right |
Example
<div class="bg-[url('https://picsum.photos/900/500')] bg-cover bg-top h-64">
</div>
Image starts from top area.
Background Repeat
Tailwind controls repeating backgrounds.
| Class | CSS |
|---|---|
| bg-repeat | repeat image |
| bg-no-repeat | no repeat |
| bg-repeat-x | repeat horizontally |
| bg-repeat-y | repeat vertically |
Example – No Repeat
<div class="bg-[url('https://picsum.photos/200')] bg-no-repeat bg-center h-64">
</div>
Image appears once only.
Gradient Background Overlay
Sometimes background images need a dark overlay to make text readable.
Example
<div class="relative h-80 bg-[url('https://picsum.photos/1200/600')] bg-cover bg-center">
<div class="absolute inset-0 bg-black/50"></div>
<div class="relative text-white flex items-center justify-center h-full">
<h2 class="text-3xl font-bold">
Hero Section
</h2>
</div>
</div>
Explanation:
| Class | Purpose |
|---|---|
| relative | parent container |
| absolute inset-0 | overlay covers full container |
| bg-black/50 | semi transparent overlay |
Responsive Background Images
Tailwind allows responsive background images.
Example
<div class="h-64
bg-[url('https://picsum.photos/600')]
md:bg-[url('https://picsum.photos/900')]
lg:bg-[url('https://picsum.photos/1200')]
bg-cover bg-center">
</div>
Behavior:
| Screen | Image |
|---|---|
| Mobile | Small image |
| Tablet | Medium image |
| Desktop | Large image |
Hero Section Example
<section class="bg-[url('https://picsum.photos/1400/700')] bg-cover bg-center h-96 flex items-center justify-center">
<h1 class="text-white text-4xl font-bold">
Welcome to Tailwind CSS
</h1>
</section>
This creates a hero banner section.
Card with Background Image
<div class="relative w-72 h-48 bg-[url('https://picsum.photos/400/300')] bg-cover bg-center rounded-lg shadow">
<div class="absolute inset-0 bg-black/40 rounded-lg"></div>
<div class="relative text-white p-4">
<h3 class="text-lg font-semibold">
Travel Blog
</h3>
<p class="text-sm">
Explore amazing places
</p>
</div>
</div>
Used for:
- blog cards
- product banners
- portfolio items
Dashboard Banner Example
<div class="bg-[url('https://picsum.photos/1200/400')] bg-cover bg-center p-12 rounded-lg text-white">
<h2 class="text-3xl font-bold mb-2">
Dashboard Overview
</h2>
<p>
Track your analytics and performance.
</p>
</div>
This creates a dashboard header banner.
Why Use Background Images in Tailwind?
Faster UI Development
You can add background images without writing custom CSS.
Responsive Design
Images adapt across different screen sizes.
Easy Overlays
Creating gradient overlays is simple.
Modern UI Design
Perfect for landing pages, hero sections, and banners.
FAQs
How do I add a background image in Tailwind?
Use arbitrary values.
Example:
bg-[url('image.jpg')]
What does bg-cover do?
bg-cover makes the background image cover the entire container.
What does bg-center do?
It centers the background image inside the container.
Can background images be responsive?
Yes. Tailwind allows responsive background utilities.
Example:
md:bg-[url('image2.jpg')]
How do I create overlay on background image?
Use an absolute positioned element with opacity.
Example:
bg-black/50
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.