How to Change Background Color in HTML
What you’ll build or solve
You’ll change the background color of a full page or specific elements using CSS.
When this approach works best
Changing background color works best when you:
Learn HTML on Mimo
- Apply a brand color to the entire page.
- Highlight sections like headers, cards, or alerts.
- Improve contrast between text and background.
- Create visual separation between layout blocks.
This approach is a bad idea if you use inline styles everywhere in a larger project. That makes future edits harder.
Prerequisites
- A code editor
- A browser
- Basic understanding of HTML and CSS selectors
No additional setup is required.
Step-by-step instructions
Step 1: Change the entire page background
Target the body element to change the background for the whole page.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Background example</title>
<style>
body {
background-color: #f3f4f6;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<p>This page has a custom background.</p>
</body>
</html>
background-color sets the background behind the element. You can use:
- Hex:
#f3f4f6 - RGB:
rgb(243, 244, 246) - HSL:
hsl(210 20% 96%)
Pick one format and stay consistent.
What to look for:
If the background does not fill the full screen, confirm you are styling body and not a child container.
Step 2: Change specific elements with classes
Use a class when you want to style a section, a card, a header, or any container without affecting the whole page.
Option A: Style a section
HTML
<section class="hero">
<h2>Hero section</h2>
<p>This section stands out.</p>
</section>
<style>
.hero {
background-color: #e0f2fe;
padding: 2rem;
}
</style>
Option B: Style a card or small UI block
HTML
<div class="card">
<h3>Profile</h3>
<p>Short description.</p>
</div>
<style>
.card {
background-color: #ffffff;
padding: 1rem;
border-radius: 8px;
}
</style>
Classes make styles reusable across your layout.
Step 3: Use inline style for quick tests
Inline styles work for one-off cases or quick experiments.
HTML
<div style="background-color: lightyellow;">
Temporary highlight
</div>
If you repeat the same style more than once, move it into a class instead.
HTML
<div class="highlight">First</div>
<div class="highlight">Second</div>
<style>
.highlight {
background-color: lightyellow;
}
</style>
Step 4: Use gradients for visual depth
Sometimes a solid color feels flat. CSS gradients add visual depth.
HTML
<header class="banner">
<h1>Gradient background</h1>
</header>
<style>
.banner {
background: linear-gradient(to right, #2563eb, #7c3aed);
color: white;
padding: 2rem;
}
</style>
Gradients use the background property instead of background-color.
Examples you can copy
Example 1: Full dark mode background
HTML
<body class="dark">
<h1>Dashboard</h1>
</body>
<style>
.dark {
background-color: #111827;
color: #f9fafb;
}
</style>
Example 2: Alternating section colors
HTML
<section class="light">Section one</section>
<section class="gray">Section two</section>
<style>
.light {
background-color: #ffffff;
padding: 2rem;
}
.gray {
background-color: #f3f4f6;
padding: 2rem;
}
</style>
Example 3: Notification banner
HTML
<div class="alert">
Action required
</div>
<style>
.alert {
background-color: #fee2e2;
color: #991b1b;
padding: 1rem;
border-radius: 6px;
}
</style>
Common mistakes and how to fix them
Mistake 1: Using color instead of background-color
What you might do
CSS
.box {
color: red;
}
Why it breaks
color changes text color, not the background.
Fix
CSS
.box {
background-color: red;
}
Mistake 2: Forgetting padding
What you might do
CSS
.section {
background-color: #e0f2fe;
}
Why it breaks
Without padding, the background hugs the text and looks cramped.
Fix
CSS
.section {
background-color: #e0f2fe;
padding: 2rem;
}
Mistake 3: Styling the wrong element
What you might do
CSS
.container {
background-color: #f3f4f6;
}
Why it breaks
The background only applies to .container, not the whole page.
Fix
CSS
body {
background-color: #f3f4f6;
}
Troubleshooting
If the background does not cover the full height, check that body and html are not restricted by layout styles.
If nothing changes, confirm your CSS file is linked correctly:
HTML
<link rel="stylesheet" href="styles.css" />
If the background appears behind only part of the page, check for nested containers with fixed heights.
If a gradient does not show, confirm you used background instead of background-color.
If text becomes hard to read, increase contrast between text color and background color.
Quick recap
- Use
background-colorto change the background color. - Target
bodyfor full-page styling. - Use classes to style specific sections, cards, and UI blocks.
- Use inline styles for quick tests, then move repeated styles into CSS.
- Use gradients with
backgroundwhen you want more visual depth.
Join 35M+ people learning for free on Mimo
4.8 out of 5 across 1M+ reviews
Check us out on Apple AppStore, Google Play Store, and Trustpilot