When you visit a website, the visuals instantly shape your experience. One of the easiest ways to make a webpage look more appealing is by using CSS background images. They’re much more expressive than plain background colors and can completely change the mood of a section or page.
Table Of Content
- 📌 What You’ll Learn
- 🧾 How to Add a Background Image in CSS
- 📖 Explanation
- 🛑 How to Stop Image Repeating (Default Behavior)
- Other values
- 🎯 How to Position a Background Image
- You can use
- 📐 How to Resize a Background Image
- Option 1: Use fixed units
- Option 2: Use special keywords
- 🧷 How to Fix Background Image While Scrolling
- 🎨 How to Use Gradient in CSS Background Image
- Common directions
- Use more than two colors
- 🧪 Complete Example: HTML + CSS
- HTML
- CSS
- 💬 Common Mistakes to Avoid
- ❓FAQ On CSS Background Image
- 🏁 Final Thoughts
This guide will walk you through how to add a background image using HTML and CSS, step by step — with real examples, best practices, and visual tips.
📌 What You’ll Learn:
- How to add a background image in CSS
- How to control image position, repeat behavior, and size
- How to create gradient backgrounds
- Examples with HTML and CSS
🧾 How to Add a Background Image in CSS
To get started, make sure your image is stored in your project folder. For example:
project/
│
├── index.html
├── styles.css
└── images/
└── sunset.png
Use the background-image property in your CSS file like this:
section {
background-image: url("images/sunset.png");
}📖 Explanation:
sectionis the HTML tag we’re targeting.url()tells CSS where the image is located."images/sunset.png"is the relative path to the image.- Quotes are optional, but good practice.
- Always end your CSS declarations with a semicolon.
🛑 How to Stop Image Repeating (Default Behavior)
By default, small background images repeat to fill the space. To stop this:
section {
background-repeat: no-repeat;
}Other values:
| Value | Behavior |
|---|---|
repeat |
Repeats in both directions |
no-repeat |
Image shows only once |
repeat-x |
Repeats horizontally (X-axis) |
repeat-y |
Repeats vertically (Y-axis) |
🎯 How to Position a Background Image
Use background-position to control where the image appears inside its container.
section {
background-position: center center;
}You can use:
- Keywords:
left,right,top,bottom,center - Percentages:
20% 40% - Pixels:
30px 100px
section {
background-position: right top;
}
📐 How to Resize a Background Image
Use background-size to control how the image scales.
Option 1: Use fixed units
section {
background-size: 100px 200px;
}Option 2: Use special keywords
| Value | Description |
|---|---|
cover |
Image stretches to cover the container (may crop edges) |
contain |
Image shrinks to fit the container (may leave empty space) |
section {
background-size: cover;
background-repeat: no-repeat;
}🧷 How to Fix Background Image While Scrolling
Use background-attachment to control whether the image scrolls with the page or stays in place.
section {
background-attachment: fixed;
}| Value | Behavior |
|---|---|
scroll |
Background scrolls with the element (default) |
fixed |
Background stays fixed on the screen (parallax-like effect) |
🖼️ Try this parallax effect on CodePen
🎨 How to Use Gradient in CSS Background Image
CSS allows you to use gradients with background-image without needing any image file.
section {
background-image: linear-gradient(to right, #ff7e5f, #feb47b);
}Common directions:
to right: Left → Right (0°)to bottom: Top → Bottom (90°)to left: Right → Left (180°)to top: Bottom → Top (270°)
Use more than two colors:
section {
background-image: linear-gradient(to right, #00f260, #0575e6, #3023ae);
}🧪 Complete Example: HTML + CSS
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<title>Background Image Demo</title>
</head>
<body>
<section class="hero">
<h1>Hello World</h1>
</section>
</body>
</html>
CSS:
.hero {
height: 400px;
color: white;
display: flex;
align-items: center;
justify-content: center;
background-image: url("images/sunset.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
💬 Common Mistakes to Avoid
- ❌ Forgetting the semicolon after CSS declarations
- ❌ Using wrong file paths (double-check your image location)
- ❌ Using large CSS background image without compressing it
- ❌ Forgetting
background-repeat: no-repeatwhen usingbackground-size: contain
❓FAQ On CSS Background Image
Q: Can I add multiple css background image?
Yes! Separate them with commas:
background-image: url("img1.png"), url("img2.png");Q: Will background images work on mobile?
Yes, but use responsive units or media queries to optimize for small screens.
Q: What’s the Difference Between background and background-image?
The background property in CSS is a shorthand that lets you set multiple background-related styles at once — including:
-
background-image -
background-color -
background-repeat -
background-size -
background-position, and more.
On the other hand, background-image is just one part of the shorthand — it only controls the background image itself, not the color, size, or positioning.
🏁 Final Thoughts
CSS background image isn’t just visual fluff — they help shape the look, feel, and vibe of your website. From full-width hero sections to elegant textures or gradients, background images can totally transform your layout.
If you’re excited to take your skills further, consider applying for a Web Developer Internship where you can build real-world projects and strengthen your portfolio. And if you’re just getting started or want a structured path, our Frontend Developer Course is designed to take you from beginner to job-ready—fast, practical, and beginner-friendly.
🎨 Don’t be afraid to mix and match properties like background-size: cover, background-repeat: no-repeat, and background-position: center to get the perfect result.
Happy designing, and keep coding 🚀
