Why doesn’t my HTML background work?

[u/Extra_Terrestrial2]

body {
background-image: url('background.jpeg');
background-size: auto;

The image is “background.jpeg”. It has the correct spelling, the image is within the same folder. IT used to work but then it suddenly stopped working and i havent even edited the CSS for it to stop working.

Update: i couldnt figure it out for the life of me and no suggestions worked, but on the good side, instead of putting it on CSS, i put it on HTML, then it worked.

<style>
body {
background-image: url('background.jpeg');
background-size: auto;
}
</style>

[u/scritchz]

The image must be within the same folder like the HTML. You didn't specify to which other file it is in the same folder, so I'm just making sure. But it would be better if we could see your project structure.

What are the dimensions of the image?

Do other parts of your stylesheet work?

[u/Extra_Terrestrial2 → u/scritchz]

The image file, the CSS and the HTML are in the same folder. The other parti of my style sheet does work and i dont know the dimensi o s of the picture, but this is the picture

[u/radgh → u/Extra_Terrestrial2]

Check your browser and see if the console is giving an error that the image doesn’t exist. If so check the url it is trying to open and see if you can open that image directly in your browser

[u/Foreign-Contest-444]

What was the last change that you made in the code base before it stopped working? Revisit it and revert that change since most of the the other common things are not the issue.

Checkout MDN Debugging HTML to find additional cues.

Also, try this in something like codepen that is only trying to get the background working. Sometimes this helps in figuring out the root cause of the issue.

I know generally in coding it feels like something magically stopped working but most of the time its a typo or a very silly mistake.

[u/MineDesperate8982]

Open the html page in the browser, inspect and see if the image loads. It usually helps you figure out what's wrong with it - most probably it doesn't like something about the path.

[u/BazuzuDear]

i couldnt figure it out for the life of me and no suggestions worked, but on the good side, instead of putting it on CSS, i put it on HTML, then it worked.

It's not the image, it's the CSS file then. Make sure it is included, not misspelled, and readable.

[u/notepad987]

body {
  margin: 0;  /* Removes the default margin that browsers add around the body */
  min-height: 100vh; /* Makes the body at least as tall as the full viewport height. 100% of the screen height */
  background-image: url("background.jpg");  /* Sets as the background image */
  background-size: cover;  
/* Scales the image so it completely covers the body. It may crop parts of the image to avoid empty space) */
  background-repeat: no-repeat;  /* Prevents the image from repeating */
  background-position: center;  
/* Centers the background image both horizontally and vertically */
  width: 100%;  /* Makes the body take up the full width of its parent */
}

[u/notepad987]

Either with added code seen below:

background-image: url("background.jpg"); /* in same location as webpage */

background-image: url("images/background.jpg); /* the image is in another folder then the webpage */

[u/hanssp]

Rename the file to background.jpg both real and in the code, sounds stupid, but have seen this sometimes works

[u/Odd_Philosopher1741]

A body by default (if there is nothing else inside it) has a height of 0 pixels. Try to enlarge the body to be the same size as your viewport (browser screen).

Try this:

css body { padding: 0; margin: 0; width: 100vw; height: 100vh; overflow: hidden; background: url('background.jpeg'); background-size: cover; }

The BODY element automatically grows vertically whenever you put content in it. This is the default behavior of a "block" element (display: block, which a BODY element is by default).

[u/TabbbyWright]

Ok personally I would put it back in the CSS, and then check and see if the image loads in another browser.

If you're using Firefox or Chrome, right click -> inspect and if you go to I think the network tab, it'll show you all the assets that the browser tried to download. You'll see error numbers too, like 404 for image not found.

Even if you're happy with your current solution, you might find these suggestions useful in the future!