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

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.