title: in asp.net.mvc, what is the correct way to reference images inside of css
body: <p>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.</p>
  
  <p>including:</p>
  
  <ol>
  <li><p><strong>Full path</strong>:</p>
  
  <pre><code>.ddTitle span.arrow {
      background: url('/content/images/dd_arrow.gif') no-repeat 0 0;
  }
  </code></pre></li>
  <li><p><strong>Relative location compared to where the css is located:</strong></p>
  
  <pre><code>#cluetip-waitimage {
      background-image: url(jQueryUI/images/ui-anim_basic_16x16.gif);  
  }
  </code></pre></li>
  <li><p><strong>Relative with ".."</strong></p>
  
  <pre><code>#cluetip-waitimage {
      background-image: url(../../jQueryUI/images/ui-anim_basic_16x16.gif);  
  }
  </code></pre></li>
  </ol>
  
  <p>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.</p>