Why does the background-image url search for the image inside the Content folder?

Question

I have a CSS like this:

#hero {
  height: 100%;
  background-image: url("~/img/bg-img.jpg");
  background-position: top center;
  padding: 0;
  overflow: hidden;
}

When I rotate, the image does not appear, when I have inspected element it looks for the image inside that link, http://localhost:58966/Content/~/img/bg-img.jpg

Because he searches inside the Content folder, he should search in "http://localhost:58966/img/bg-img.jpg"

Any idea?

Answer 1

All paths beginning with / are absolute, all paths beginning without / are relative.

It is searching in the Content folder because you specified a relative path (~/img/bg-img.jpg). That is, as your CSS file is in the Content folder, it will put your path at the end of the CSS file URL: http://localhost:58966/Content/ + ~/img/bg-img.jpg.

How you want the way to be http://localhost:58966/img/bg-img.jpg, it is possible to do this in at least two ways:

• Absolute path: background-image: url("/img/bg-img.jpg");
• Relative path: background-image: url("../img/bg-img.jpg");

Answer 2

In your case, this solves:

#hero {
  height: 100%;
  background-image: url("/Content/img/bg-img.jpg");
  background-position: top center;
  padding: 0;
  overflow: hidden;
}

CSS does not interpret ~.