title: How to deal with relative image URL changing when CSS is minified?
body: <h1>The Problem</h1>
  
  <p>I have a large website, so my CSS folder structure can be rather deep. Any CSS file can set an element's background image via a <a href="https://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-location-is-it-relative-to">relative URL</a>. Before releasing to my production servers, I need to minify all CSS files. This minification process may break some of the relative URLs because it effectively flattens the folder structure. As a developer, how do you deal with this discrepancy between development and production code?</p>
  
  <h1>Example</h1>
  
  <p>This is my folder structure:</p>
  
  <pre><code>image/
      article/
          brushStroke.jpg
  style/
      module/
          button.css
      page/
          article/
              introToPainting.css
      minified/
          style20130522.css
  </code></pre>
  
  <p>During development, I may have this CSS rule in <em>introToPainting.css</em>:</p>
  
  <pre><code>#step1 {
      background-image: url(../../../image/article/brushStroke.jpg);
  }
  </code></pre>
  
  <p>Let's say on a particular simple page, I only need <em>button.css</em> and <em>introToPainting.css</em>. For production release, these two CSS files will be minified into style20130522.css. Now that the minified file resides in a different folder depth than <em>introToPainting.css</em>, the path to <em>brushStroke.jpg</em> is now wrong.</p>
  
  <p><p><a href="http://scs.veetle.com/soget/session-thumbnails/5363e222d2e10/0eaf8f26f193375f97b7deeabae97016/5363e222d2e10_0eaf8f26f193375f97b7deeabae97016_20140509184555_536d84d367530_74_896x672.jpg" rel="nofollow noreferrer">http://scs.veetle.com/soget/session-thumbnails/5363e222d2e10/0eaf8f26f193375f97b7deeabae97016/5363e222d2e10_0eaf8f26f193375f97b7deeabae97016_20140509184555_536d84d367530_74_896x672.jpg</a></p></p>
  
  <p><p><a href="http://beta.vidopop.com/v/1iexo6t" rel="nofollow noreferrer">http://scs.veetle.com/soget/session-thumbnails/534711b951df7/60d40fd7ca34cf794237c5ec8cb4ff6d/534711b951df7_60d40fd7ca34cf794237c5ec8cb4ff6d_20140521112148_537ceebcd74e0_98_896x672.jpg</a></p></p>