background-image in CSS - Add Responsive Background Images Like a Pro
Adding a background image in CSS is a key step for creating attractive sections like hero banners and cards. The real secret is not just adding the image, but controlling its size and display behavior.
If you are looking for background-image in CSS, the difference between cover and contain, or how to make background images responsive, this lesson is for you.
What Is background-image in CSS?
The background-image property lets you place an image behind an element's content.
The image stays in the background while text and buttons appear on top.
Simple definition:background-imageadds a background image to an HTML element usingurl().
How to Write background-image in CSS
.hero {
background-image: url("mountain.jpg");
}
What does this code do? It sets mountain.jpg as the background for the .hero element.
Line by line:
.hero: the target element.url("mountain.jpg"): the image file path.
Expected result: the image appears behind the element content.
Common mistake: a wrong path in url(), so the background does not appear.
Result in the browser (simulation):
The Most Important Partner Property: background-size
To make background images responsive across different screen sizes, use background-size.
The most common values are:
| Value | What It Does | When to Use It |
|---|---|---|
auto |
The image's original size | Rarely used in modern UIs |
cover |
Fills the element completely, even if it crops | Hero sections and large background areas |
contain |
Shows the full image without cropping | When seeing the full image matters |
cover vs contain in CSS
.hero-cover {
background-size: cover;
}
.hero-contain {
background-size: contain;
}
What does this code do? It shows two different ways to display the same image.
Expected result:
- cover: full coverage (may crop part of the image).
- contain: full image visible (may leave empty space).
Common mistake: using contain on a large hero, which creates unwanted gaps.
Result in the browser: cover
Result in the browser: contain
A Common Practical Combination for Background Images
.hero {
background-image: url("hero.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
What does this code do? It creates a balanced, modern, responsive background setup.
Line by line:
cover: full coverage.center: focus in the middle.no-repeat: prevent tiling.
Expected result: a clean hero section that works across screen sizes.
Common mistake: forgetting no-repeat, which makes small images tile.
Common Mistakes with background-image
1) The image does not appear: check the path, filename, and letter case.
2) Awkward cropping: review background-position when using cover.
3) Low text contrast: add a subtle dark overlay above the image for readability.
FAQ - Common Search Questions
How do I add a background image in CSS?
Use background-image: url("...") on the target element.
What is the difference between cover and contain in CSS?
cover fills the area and may crop, while contain shows the full image and may leave empty space.
How do I make a background image responsive in CSS?
Typically: background-size: cover; background-position: center; background-repeat: no-repeat;.
Why does my background image not show?
The most common cause is a wrong image path or an element with no height.
Is background-image better than img in CSS?
For decorative backgrounds, background-image is better.
For meaningful content images (SEO/Accessibility), use <img>.
hero section, add a background image with cover and center, then test on a phone screen.