Question

I’m a beginner programmer and have looked at several resources, but I can’t figure out why location of a external css stylesheet matters. For example, changing the link to the file and the location of the file, respectively, will determine if a picture loads or not:

A simple line in the css:

body {
    background: url(./images/test.jpg) center center fixed no-repeat;
}

This will load a picture:

<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />

This will not:

<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />

Why?

Answer 1

Its because there is no images folder inside your css folder. It’s relative to the css file, not the html file.

You can fix it like so:

body {
    background: url(../images/test.jpg) center center fixed no-repeat;
}

This goes up to the root directory first, then into the images folder.

Then you can use your css line:

<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />