BG image from web works but folder image doesn't - css

Question

I'm taking a course on Udemy and I've followed what it shows in the lesson and even asked in discord but haven't received a solution.
The background image I used from the web using a image URL works, but when I try to link an image saved on the same folder as the CSS and HTML files nothing happens. All I get is a blank white background instead of an image. I'll be adding screenshots.
https://imgur.com/gallery/C4468Kb
body {
background-image: url(starwars.jpg);
background-size: auto;
}
h2 {
color: red;
text-align: center;
border: 5px solid purple;
cursor: crosshair;
}
p {
color: pink;
}
p {
color: green;
}
li {
list-style: none;
display: inline-block;
}

Answer 1

Try background-image: url('starwars.jpg');

Answer 2

Check the file path for the image and make sure it reflects what is being written in your url() css. Right now you are showing that image is located in the root directory of your project. If the image is not in the root directory, say for example it's in a folder called "images" in your root, then the url should read url('images/starwars.jpg').
It would be good practice to put any image you want to use in your site in a folder named "images" inside your root directory anyway. Try that, and see if it works.
So just to clarify: create a new folder inside the root folder of your project. It should be on the same hierarchical level as your index.html file. Take the image, where ever it is, and place it inside that new images folder. Change your css to say
background-image: url('images/starwars.jpg');