in asp.net.mvc, what is the correct way to reference images inside of css

Question

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.

Answer 1

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.

Answer 2

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.