title: site 5x faster via mod_rewrite, but CSS images are broken
body: <p>I am using .htaccess to accelerate a site with the following redirects:</p>
  <pre><code>request for http://example.com/images/name.jpg  routed to  http://i.example.com/name.jpg
  request for http://example.com/css/name.css     routed to  http://c.example.com/name.css
  </code></pre>
  <p>From listening to the Stack Overflow podcast, I learned that this could make a site faster, since <strong>the browser can download more files simultaneously</strong> (apparently two streams per domain, although this is unconfirmed).</p>
  <p>Indeed, the difference is dramatic; the page loads about <strong>five times as fast</strong>!</p>
  <p>I have not touched the original folders and images -- I am just using mod_rewrite to change the addresses from <strong>example.com/images/</strong> to <strong>i.example.com/</strong>:</p>
  <pre>
  rewritecond %{HTTP_HOST}     !^i\.example\.com       [NC]
  rewriterule ^images/([^/]+)$ http://i.example.com/$1 [L]
  rewritecond %{HTTP_HOST}     !^c\.example\.com       [NC]
  rewriterule ^css/([^/]+)$    http://c.example.com/$1 [L]
  </pre>
  <p>The problem I have is that this technique works perfectly for image tags included in html, but doesn't work for images included via stylesheets:</p>
  <blockquote>
  <p><strong>img src=/images/logo.jpg</strong> works perfectly</p>
  <p><strong>background:url(/images/logo.jpg);</strong> does not work</p>
  </blockquote>
  <p>The server error log contains the following entry:</p>
  <blockquote>
  <p>File does not exist: /var/www/html/css/images, referer: <a href="http://example.com/page.html" rel="nofollow noreferrer">http://example.com/page.html</a></p>
  </blockquote>
  <p>This seems to imply that the rewrite rule is being applied incorrectly.</p>
  <p>The stylesheets work if I use:</p>
  <blockquote>
  <p><strong>background:url(<a href="http://i.example.com/logo.jpg" rel="nofollow noreferrer">http://i.example.com/logo.jpg</a>);</strong></p>
  </blockquote>
  <p>However, in order to avoid rewriting all the style sheets, I'd like to know: <strong>why doesn't url rewriting apply to stylesheets the way it does to html img tags</strong>.</p>
  <p><strong>[update1]</strong> This problem exists in Safari 4 Beta, Firefox 3.0.3, and Chrome, but the <strong>page works perfectly in IE6</strong>.</p>
  <p><strong>[update2]</strong> Adding [L,R=301] and [L,R=302] did not help.</p>
  <p><strong>[update3]</strong> I tried the following based on Gumbo's suggestion below:</p>
  <p>Redirect externally if path doesn’t match host name:</p>
  <pre><code>rewritecond %{HTTP_HOST}     !^i\.domain\.com$
  rewriterule ^images/([^/]+)$ http://i.domain.com/$1 [L,R=301]
  rewritecond %{HTTP_HOST}     !^c\.domain\.com$
  rewriterule ^css/([^/]+)$    http://c.domain.com/$1 [L,R=301]
  </code></pre>
  <p>Redirect internally; if there's an unnecessary folder name remove it (see server error above):</p>
  <pre><code>rewritecond %{HTTP_HOST}     ^i\.domain\.com$
  rewriterule ^images/([^/]+)$ $1 [L]
  rewritecond %{HTTP_HOST}     ^c\.domain\.com$
  rewriterule ^css/([^/]+)$    $1 [L]
  </code></pre>
  <p>It still didn't work. Bizarrely, the server error is:</p>
  <blockquote>
  <p>File does not exist: /var/www/html/css/var, referer: <a href="http://domain.com/page.html" rel="nofollow noreferrer">http://domain.com/page.html</a></p>
  </blockquote>