CODEWITHSUNDEEP
htmlcssbackground-imageabsolute-path
Chthonic Project
Chthonic Project

Reputation: 8356

CSS issue: absolute path not working for background image

In a simple static webpage project, I have the following in my main.css:

.navbar-custom {
  background: rgb(52, 73, 94);
  background: rgba(52, 73, 94, 0.7);  /* navbar-bgcolor */
  background-image: url(../../images/distant-lights.jpg);
  background-size: cover;
  /* background-image: url(https://jessicasse.files.wordpress.com/2012/10/distant-lights-1-1152x8641.jpg); */
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  font-family: 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Calibri, Arial, sans-serif;  /* heading font */
}

And this works as intended. However, if I modify the background-image line and specify the absolute path /images/distant-lights.jpg, the image does not show up.

The project structure is as follows:

enter image description here

Even though the HTML+CSS works with the relative path, I would like to know why the absolute path fails. As you can see, I tried out absolute URLs with http, and that works just fine.

Upvotes: 1

Views: 1038

Answers (1)

Siddharth Singh
Siddharth Singh

Reputation: 55

/images/distant-lights.jpg

This is not an absolute path. An absolute path starts from a system root directory. On a typical linux system it looks something like this:

/home/username/somefolder/someotherfolder/projectfolder/images/distant-lights.jpg

Upvotes: 1

Related Questions