Background/background image not working?

Question

I'm practicing building a Harley Davidson website and I've encountered a strange issue regarding 'background' and 'background-image'.

A 404 type error keeps appearing in the console:

(anonymous) @ jquery.min.js:2
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
K @ jquery.min.js:2
jquery.min.js:2 GET  file:///Users/benjamingibbs/Desktop/Harley%20Davidson/css/images/austin-neill-174636.jpg net::ERR_FILE_NOT_FOUND

There is nothing wrong with the file-path. The image loads when I use an 'img' tag inside a div also the logo appears from the same directory.

.jumbotron {
  background: url("images/austin-neill-174636.jpg");
}

Why is the image not appearing?

• Tried 'body' 'background:' as well but nothing.

Answer 1

Is your images folder in the same folder as your css file? Because if not, your url should look like this:

background: url("../images/austin-neill-174636.jpg");

Including the ../ escapes the current folder to the images folder in your main project directory.

Answer 2

How your project is structured? If you look at the error your path is:

.../css/images/austin-neill-174636.jpg

Does your images folder is at the same level of your CSS folder?

If your project structure is like this:

/images
/css

You need to go a level higher. Try this instead:

.jumbotron {
  background: url("../images/austin-neill-174636.jpg");
}