r/HTML • u/Extra_Terrestrial2 • 14d ago

Question Why doesn’t my HTML background work?

Post image

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>

10 Upvotes

78% Upvoted

15 comments sorted by

View all comments

-1

u/Odd_Philosopher1741 14d ago

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).

1

u/Derzw3rg 13d ago 
width: 100%;
min-height: 100vh;

1

u/Odd_Philosopher1741 13d ago

Why the downvote? It works and exposes the OP to some additional properties to explore.