Why won't the background image show?

Question:
In the <main> tag, the background-image CSS property is set to:

url("https://cdn.glitch.global/a46ef4ee-032a-46df-8cea-325ae187afbd/space-stars.jpg?v=1707323019391");

However, there is no visible background image. What am I doing wrong?
Repl link:
https://replit.com/@element1010/space-clicker

<main>
...
</main>
main {
  background-image: url("https://cdn.glitch.global/a46ef4ee-032a-46df-8cea-325ae187afbd/space-stars.jpg?v=1707323019391");
}

The reason the background is not showing is because the main tag is not filled with content, and it is set to auto-fill based on text. To fix this, you can change your style.css file to:

main {
  background-image: url("https://cdn.glitch.global/a46ef4ee-032a-46df-8cea-325ae187afbd/space-stars.jpg?v=1707323019391");
  height:100vh;
}

I hope this helps!

3 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.