If your CSS background image is not showing, the browser usually cannot find the image, the style is not reaching the right part of the page, or that part of the page has no visible space. By checking those possibilities in order, you can usually find the mistake without guessing.
A background image is like paint inside a box. CSS does not insert a new image element into the page. It paints the image behind the content of an HTML element.
That simple picture explains many missing backgrounds. The paint cannot appear if CSS points to the wrong file, chooses the wrong box, or has no box to paint. The checks below help you test each connection.
Start With a Small Working Background Image
Before fixing a larger page, it helps to know what a complete connection looks like. This HTML creates one section with the class name hero:
<section class="hero">
<h2>Explore the Coast</h2>
</section>This CSS selects that section, gives it visible height, and adds both a color and an image:
.hero {
min-height: 240px;
background-color: lightblue;
background-image: url("images/coast.jpg");
}If everything connects, you will see the coast image behind the heading. If you see only light blue, the section exists but the image is not loading. That temporary background color gives you a visible clue before you check anything else.
The CSS background images lesson explains how to control the image after it appears. For now, keep the example small and focus on making the image visible.
Check the Image Path From the CSS File
The path inside url() tells the browser where to find the image. With a separate CSS file, a relative path begins at the CSS file’s folder, not at the HTML file.
Imagine that your project files are arranged like this:
my-website/
index.html
style.css
images/
coast.jpgBecause style.css and the images folder are beside each other, CSS can go directly into that folder:
.hero {
background-image: url("images/coast.jpg");
}Now imagine that the stylesheet is inside its own css folder:
my-website/
index.html
css/
style.css
images/
coast.jpgThe path must first leave the css folder. Two dots followed by a slash mean go up one folder:
.hero {
background-image: url("../images/coast.jpg");
}Read the path from the location of style.css, one folder step at a time. The Base Files lesson can help if you want more practice organizing index.html, style.css, and other files.
Also compare the path with the file itself. Check the exact file name, including capitalization and the extension. coast.jpg, Coast.jpg, and coast.png may point to different files.
Make Sure the CSS Selector Matches the Element
A correct path will not help if the CSS rule is attached to the wrong element. The selector at the start of a CSS rule must match the HTML you want to style.
Here, the HTML uses the class name hero:
<section class="hero">
<h2>Explore the Coast</h2>
</section>This rule does not match because it looks for a class named banner:
.banner {
background-image: url("images/coast.jpg");
}Change the selector to .hero, and the rule reaches the intended section:
.hero {
background-image: url("images/coast.jpg");
}Look closely for small differences such as hero and heros. Remember that a class selector begins with a dot in CSS, while the HTML uses class="hero". The CSS selectors lesson explains that connection in more detail.
Give the Element Visible Space
A background image fills an element’s existing area. It does not automatically give an empty element height. If the element has no content and no height, there may be nothing visible to fill.
This empty section has a background image but no content:
<section class="hero"></section>With only the image rule, the section can have a height of zero:
.hero {
background-image: url("images/coast.jpg");
}Add a minimum height to create visible painting space:
.hero {
min-height: 240px;
background-color: lightblue;
background-image: url("images/coast.jpg");
}min-height gives the section a starting height while still allowing it to grow if you add content. If sizing feels unclear, the CSS size properties lesson explains width, height, and minimum height.
The temporary light-blue color is useful here too. If you see a blue rectangle but no image, the box has space. You can then return to the path and syntax checks.
Check the CSS Rule for Small Mistakes
CSS punctuation is small, but each mark helps the browser read the rule. A misspelled property, a missing colon, or an unfinished value can make the browser ignore that instruction.
This version has several problems:
.hero {
backgroung-image url("images/coast.jpg")
The fixed version spells background-image correctly and includes the colon, semicolon, and closing brace:
.hero {
background-image: url("images/coast.jpg");
}Compare your rule one piece at a time. Check the property name, the colon after it, the spelling of url(), the quotation marks and parentheses, the semicolon, and both braces.
Look for a Later Background Rule
A rule can be correct and still be replaced later. The short property named background can set the color, image, position, and other background parts together. When it appears later, it can clear an earlier image.
In this example, the second declaration leaves the section with only a light-blue background:
.hero {
background-image: url("images/coast.jpg");
background: lightblue;
}For a simple fix, keep the color and image as separate properties:
.hero {
background-color: lightblue;
background-image: url("images/coast.jpg");
}Then search the rest of your CSS for another rule that styles the same element. You do not need to learn every detail of the cascade to solve this problem. For now, notice that a later background instruction can change the result.
Use This Troubleshooting Order
When the image disappears, change one thing at a time. This order moves from the easiest visible test to the more detailed code checks:
- Confirm the box. Add a temporary background color and a
min-height. If no colored area appears, the element may have no space or the selector may not match. - Confirm the selector. Compare the CSS selector with the HTML class or element name character by character.
- Confirm the path. Start at the CSS file’s folder and follow the path to the image. Check the file name, capitalization, and extension.
- Confirm the syntax. Compare the property, colon,
url()value, semicolon, and braces with a working example. - Check later rules. Look for another
backgroundorbackground-imagedeclaration that styles the same element after your first rule.
After each change, save the file and refresh the page. A single careful change makes it easier to see which fix mattered.
If you want a clean comparison, return to this known-good version:
<section class="hero">
<h2>Explore the Coast</h2>
</section>.hero {
min-height: 240px;
background-color: lightblue;
background-image: url("images/coast.jpg");
}Use the path that matches your own folders. Once this version works, add your other background styles back one at a time.
A CSS Background Is Not an HTML Image
An HTML <img> adds an image as page content. A CSS background paints an existing element. That is why a CSS background uses url(), follows a path from the stylesheet, and depends on the element having visible area.
This article focuses only on the CSS version. If the background now appears, you have solved the connection problem. You can next decide how the image should fit, crop, or repeat inside the box.
What to Learn Next
Once the image appears, these lessons will help you understand and control each part of the result.
- CSS background images show how to control fitting, cropping, positioning, and repetition.
- Base Files explains how your HTML and CSS files connect inside a website folder.
- CSS selectors help you aim each style rule at the intended HTML element.
- CSS size properties explain how width, height, and minimum height control an element’s visible space.