0

I am new to mvc application and creating site in aspx view engine. i have a css file in mycss/style.css and images are in images/img1.jpg. what is the difference between

 background: url("../images/img1.jpg") no-repeat;
 and background: url("~/images/img1.jpg") no-repeat;

in style.css

Tim Vermaelen
  • 6,869
  • 1
  • 25
  • 39
Er Mayank
  • 1,017
  • 2
  • 16
  • 39
  • 1
    I don't think `~/` will work in css files. – edhedges Apr 18 '14 at 16:32
  • what is difference in Dot (./Images) and double dot (../Images) in file path ? – Er Mayank Apr 18 '14 at 16:34
  • `../Images` means go up one directory, then down to the `Images` folder. `./Images` means go to the `Images` folder in the current directory. – mason Apr 18 '14 at 16:35
  • Are you saying that both ways work for you? – Wesley Murch Apr 18 '14 at 16:41
  • This [thread](http://stackoverflow.com/questions/17809007/css-background-url) explains how exactly the css url works for background [1]: – Qasim Apr 18 '14 at 16:42
  • As shown in [this post](http://stackoverflow.com/questions/4563235/where-does-asp-net-virtual-path-to-resolving-the-tilde) the `~` is handled in `System.Web.Mvc.dll` – Tim Vermaelen Apr 18 '14 at 16:45
  • The quotes, by the way, are optional.`background:url(../images/img1.jpg) no-repeat` is perfectly valid. – Sam Apr 18 '14 at 16:45

3 Answers3

3
background: url("../images/img1.jpg") no-repeat;

The above is relative to the current location. It goes up one folder, then down to the images folder and finally gets the picture file.

background: url("~/images/img1.jpg") no-repeat;

The above is invalid. The tilde means start at the site root. But CSS doesn't support that syntax. The equivalent would be background: url("/images/img1.jpg") no-repeat;.

Depending on your site layout, both will work. I tend to use root relative paths because if you move your CSS file to a different folder it might break with a path relative to the current location.

For a good discussion of relative vs site relative vs absolute, see this article.

mason
  • 31,774
  • 10
  • 77
  • 121
0

You can also write it this way background: url("images/img1.jpg") no-repeat; without any 'prefix' which means 'the images in the images folder.

W.D.
  • 1,033
  • 1
  • 7
  • 12
  • This is assuming that the images folder is in the same folder as the CSS. Which is probably not the case judging by the posted code in the question. – mason Apr 18 '14 at 16:41
-1

This would be the correct way.

background: url("../images/img1.jpg") no-repeat;
Jason Aller
  • 3,541
  • 28
  • 38
  • 38
iamcarloseperez
  • 1