Question 199128 in Html Question posted in
Some basic documentation can be found here.

Why isn't my background image displaying in my html file?

I am attempting to make a basic space website. I wanted to have a background image of a space picture in the body element. However, when I link the url, it doesn’t show in my webpage. I tried testing to make sure my html and css are linked properly by changing the h1 color, and it works just fine. So, I’m positive it’s something with the file path itself. What could I have done wrong?
I’ve attached my code.
enter image description here
enter image description here

Tags:

3

Answers


  1. 0

    I do not see "images" folder in your file structure in the screenshots. If the "space photo.jpg" file is in the same folder as the css file your css line should look like this:

    {background-image:url("./space photo.jpg")}

    You could learn a little more regarding paths here

    https://www.w3schools.com/html/html_filepaths.asp

    BTW it is considered good practice using hyphens instead of space in image names
    (https://www.mediavine.com/image-filename-seo/#:~:text=The%20filename%20should%20be%20descriptive,you%20should%20address%20going%20forward.)

    Login or Signup to reply.
  2. 0

    I see image file in the same folder as your space.css, also I don’t see any images folder,

    so you can just try this:

    /* space.css */
   
body {
background-image: url("space photo.jpg")
}
    Login or Signup to reply.
  3. 0

    Your error is that the images folder does not exist. There are two solutions to this problem. Create an images folder and move the image to that folder, or change the path to the image in the css file to the correct path.

    If you decide to change the path in the file then replace the property with this:

    background-image: url("space photo.jpg");

    I also recommend that you study the file paths stuff as it’s very important.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search