How to fix CSS background-image not working | HTML/CSS

Published: December 3, 2020

Working with background images in CSS can be tricky. Because even if you set it in the code, there are other factors that may prevent the background-image from showing up on the page.

To help with that, here are four ways to fix your background-image not working, using HTML and CSS:

1. Check that your CSS file is linked correctly in your HTML file.

In order for your CSS styles to get loaded in your website, you need to add a <link> tag in your HTML file. This tag should be located inside the <head></head> tags, and should look something like this:

<link rel="stylesheet" href="/style.css">

How can you tell if your CSS file is loaded correctly or not?

One sign is if you load your website and the background is white, all the text looks like Times New Roman font, and there are no colors or other styles.

You can also check your browser’s inspector tool by right-clicking anywhere in the page and selecting “Inspect Element” or pressing Ctrl-Shift-I. In the inspector, if you see an error that says 404 not found for the CSS file, or The resource... was blocked due to MIME type mismatch, that tells you that there was a problem loading the CSS file.

Error showing: The resource was blocked due to MIME type mismatch

If you see one of these errors and your website looks unstyled, the first thing to check is In the <link> tag. Make sure that the href attribute is loading the same filename as your actual CSS file, and that the path is correct.

The path needs to be relative to where your HTML file is. If the CSS file is in the same directory as your HTML file, you can set href to be style.css (or whatever your CSS filename is).

I usually put a forward slash / before the path, for example: href="/style.css". This will make sure that the path will start at your website root.

You may need this if you have pages in different subfolders that are all loading the same <head> code. For example, if you’re using a templated CMS (content management system) where there is shared code.

2. Make sure the image path is set correctly in the background-image url.

Once you have made sure that your CSS file is linked correctly, also check that the image itself is set correctly. Again, you will want to open your code inspector in the browser to check.

How to tell if the background-image is loaded correctly or not?

If the background image doesn’t seem to be loading, and you see a 404 error in the inspector for the image, that’s a good indicator that there’s an issue with the image itself.

If this is happening, double-check that the image filename matches the actual file, and that the path in the background-image: url() is going to the correct location.

The location of the image file needs to be relative to the location of the CSS file itself, not your website root. So if your CSS file is in a subfolder, the path may need to be different than if the CSS file was in your root.

To help explain this, let’s say you have a website file structure like this:

(project folder)
  |-- index.html
  |-- (css)
        |-- style.css
  |-- (img)
        |-- cat-pic-1.jpg

This website contains the index.html file in the project root, a css folder that contains the style.css file, and an img folder that contains the image cat-pic-1.jpg.

In your CSS styles, if you want to load cat-pic-1.jpg as a background image, the file path needs to:

Go up one level out of the css folder,
Navigate into the img folder,
Then load the image file itself.

The background-image property in the CSS file should look like this: background-image: url('../img/cat-pic-1.jpg').

The ../ symbols mean that you will go up one level in the file structure.

You can do the same thing by setting: background-image: url('/img/cat-pic-1.jpg').

This approach uses the forward slash (/) to start from the website root, then going into the img folder to load the image file.

So whether you navigate up through parent folders or start at the website root, don’t forget to utilize your code inspector to test and check if the image is loading or giving you a 404 error.

3. Explicitly set the element’s width and/or height.

If the image isn’t showing up, but you aren’t getting any 404 errors, go into the code inspector and check the element itself.

If there is no HTML content in the element, it might have zero width or height (or both!). This means that even though the background image is technically loaded correctly, the element itself is essentially invisible if it’s 0px in size.

Code inspector showing image has 0 pixels in height

Check out the above example showing a website and the code inspector. If you hover over the .card__image element on the right pane, a label will appear over the element on the left pane, telling you that it has 354px width and 0px height.

That 0px height means the element won’t be visible.

To fix it, explicitly set the height of the .card__image element to height: 120px. If the element might have text content of varying length, you can set it to min-height: 120px instead, so it will be a minimum of 120px tall but can be taller if the text content needs more space.

Card showing the background image correctly now

4. Make sure you are using correct syntax in CSS background properties.

One last thing you can check is if you are using the correct syntax for the background CSS properties.

Here are some common ones you might be using, along with possible values:

background-color: #000000;
background-image: url("/landscape1.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;

You can also use the shorthand background property that lets you combine all those different values in one style rule:

background: #000 center/cover url("/img/landscape1.jpg") no-repeat;

If you are using this shorthand property with a lot of values, make sure that the syntax is correct. The order of the different background properties shouldn’t matter, but there is one tricky pitfall if you are setting background-size.

The background-size value can only be used if it immediately follows the background-position value, with a forward slash (/) between them. In our example it is written like this: center/cover, where center is the background-position and cover is the background-size.

You can use the background-position value by itself, but if you try to use just cover by itself, the CSS rule will be invalid and none of the background properties will work at all.

If that happens, you will be able to see the invalid rule in the code inspector like this:

Enjoyed this post?

Tweet me about it! 😀

Want to learn how to build a website?

I'm making a course that will teach you how to build a real-world responsive website from a Figma design!

Learn more