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

Navigation
0

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 squeeze, the image does not appear, when I have to inspect element it looks for the image inside that link, http://localhost:58966/Content/~/img/bg-img.jpg

Because it looks inside the Content folder, it should look at "http://localhost:58966/img/bg-img.jpg"

Any ideas?

    
asked by anonymous 21.10.2015 / 22:50

2 answers

2

All paths starting with / are absolute, all paths starting with / are relative.

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

As you want the path link , you can 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");
21.10.2015 / 23:00
0

For your case, this resolves: 

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

CSS does not interpret ~ .

    
21.10.2015 / 23:09
Create a policy Error android.database.sqlite.SQLiteException