15

I am reviewing a site and i see a lot of different conventions on reviewing how images are reference in CSS on a asp.net-mvc site.

including:

  1. Full path:

    .ddTitle span.arrow {
    background: url('/content/images/dd_arrow.gif') no-repeat 0 0;
}

  2. Relative location compared to where the css is located:

    #cluetip-waitimage {
    background-image: url(jQueryUI/images/ui-anim_basic_16x16.gif);  
}

  3. Relative with ".."

    #cluetip-waitimage {
    background-image: url(../../jQueryUI/images/ui-anim_basic_16x16.gif);  
}

In asp.net-mvc, with routing, etc . .is one correct and the others wrong or is this just preference or convention? Assume that this site might sit on a shared environment with other sites.

leora
  • 188,729
  • 360
  • 878
  • 1,366
  • 2
    Really not sure what this has to do with MVC. Routing has nothing to do with css and image files. – Charles Boyung Apr 20 '11 at 12:57
  • I also don't see what it has to do with MVC. – Ciel Apr 20 '11 at 13:21
  • 2
    This is a good question. In MVC, you can route *any* url with *any* number of /'s in it and route it to any view. In WebForms, there was only 1 route, so this problem only needed to be solved once and several image and css referencing techniques worked. Now I feel like I'm pushed towards a full url or something relative to the domain root. – MatthewMartin Jul 07 '15 at 21:54

3 Answers3

6

Your first option is perfectly fine if your application is always going to be in the root folder for the website (or at least your images are all going to be in the root folder). If you might have a different path in different situations (like having a shared site on development or testing), then this doesn't work.

The second and third options are basically the same thing. Which one is used is completely dependent upon where the images are located in relation to the CSS file. I personally believe that the second looks cleaner, so I try to put any images referenced by my CSS files in a folder structure relative to where the CSS is located. However, some people prefer to keep all images in one place (even mixing content images with site "chrome" images) and as such may need to use relative pathing with ../ in order to accomplish this.

Charles Boyung
  • 2,464
  • 1
  • 21
  • 31
5

I generally do it like this ...

background-image: url('/jQuery/images/ui-anim_basic_16x16.gif');

The opening / denotes the root folder, so all of your paths can be relative to the root of the program instead of the folder the page is running from. This adds a little bit of typing, but it removes a lot of the problems of parent hashing.

So if your images were like this ...

  • Solution
    • Controllers
    • Content
      • JQuery
        • images

Your path would be background-image: url('/content/jquery/images/ui-anim_basic_16x16.gif');

Doing it this way removes most of the implications of any sort of pathing. Because ASP.NET as a language understands the concept of relative urls, this should work on pretty much any situation unless the server you are hosting it on has something very awkwardly configured - and in that case, standards and practices won't get you too far.

Root-Relative Urls also make your application much more modular, from my experience. There may be more experienced programmers on here that can refute this with a reason, but from everything I have built, making all of my image urls root-relative has allowed me to drop my program into any folder and run it without complication.

Ciel
  • 17,312
  • 21
  • 104
  • 199
  • 4
    How will this allow you to drop you app in any folder and have it run without complication? If you have your app in the root folder of your site, then it will work fine, but if you drop your app into the "/MyApp" folder on a website, your image links will all be broken, because they would still be looking for "/content/jquery/images/ui-anim_basic_16x16.gif" instead of "/MyApp/content/jquery/images/ui-anim_basic_16x16.gif". – Charles Boyung Apr 20 '11 at 13:00
  • Let me rephrase. It will allow you to move files around without as much risk of breaking your url paths. There is not really a 'right' way to do it, this is just what I have found works the best for me. – Ciel Apr 20 '11 at 13:15
  • As for your comment about it breaking, you may be right. I've never encountered this though. Whenever I have put applications in subfolders, I always see the top-level folder of the specific application treated as the root folder. Perhaps I've just never encountered a server environment configured like you have. – Ciel Apr 20 '11 at 13:19
  • 2
    I don't know how you could see the top-level folder for the application as the root folder. That's not possible in any server environment. It's not even a server thing - it's how HTML and CSS work. If your application is at `www.mysite.com/myapp` then a link to `/content/images/myimage.gif` is going to point to `www.mysite.com/content/images/myimage.gif` *not* `www.mysite.com/myapp/content/images/myimage.gif`. No server configuration is going to change that. – Charles Boyung Apr 20 '11 at 13:45
  • You may be right, I've just never had this happen before. Perhaps IIS virtual folders has something to do with it? In any case, I get what you're saying and it makes sense. – Ciel Apr 20 '11 at 14:01
  • 1
    Nope, trust me, virtual folders has absolutely nothing to do with it. It is going to work the same way with virtual folders or not. Go back and look at what your sites are actually doing - I'm sure you'll see the same thing. – Charles Boyung Apr 20 '11 at 14:02
0

I had a similar question. Since MVC allows the use of ~/ (in razor views for example) to denote the application root, I wondered if this should be done for image paths in my CSS files.

Of course, since CSS files are not processed on the server side, this won't work. However I think the right way is to use relative paths. This should be fine because the path to the CSS file (in a layout for example) can use ~/ and then the path from the CSS file to the image will be fixed; and it doesn't matter where the application root is... or if the layout or the main view are in a different Area.

KevinVictor
  • 524
  • 1
  • 5
  • 14