Relative URL of the backgroung-image attribute

Hello, guys!

link to the exercise (CSS visual rules, Background-Image)

We see next example in the exercise:

.main-banner {
  background-image: url("images/mountains.jpg");
}

it’s not should be like that?

.main-banner {
  background-image: url("./images/mountains.jpg");
}

They both point to the same directory. ./ is the current directory.

+ project
  + images/
    * mountains.jpg
  * index.html

./ will be the project directory.

1 Like

:thinking:

If we don’t start from local directory, why we don’t use full directory path?

for example:

f/Users/a1/Documents/Atom-Projects/HelloWorld/index.html

But this, without ./ it should full URL.

url("images/mountains.jpg")

Or URL above is full, already? How it’s possible?

That is a background image URL in CSS, not a SRC attribute in HTML.

src="images/mountains.jpg"

is adequate enough if being imported into index.html. Same as,

src="./images/mountains.jpg"

As for accessing files on the local machine, avoid referencing the drive root. It is not the site root, HelloWorld is.

1 Like

Explanation difference between url, src, href - topic