site 5x faster via mod_rewrite, but CSS images are broken - css

Question

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

Answer 1

I was able to resolve this by not trying to incorporate directories into the subdomains:
request for domain.com/images/ routed to i.domain.com/images/
request for domain.com/css/ routed to c.domain.com/css/
It works perfectly and is still extremely fast.
There seems to be a bug in modern browsers where a css request that is redirected will apply only the new domain, leaving the original directories as part of the request:
If a css image at url(domain.com/images/name.jpg) is redirected to i.domain.com/name.jpg, the browser will mistakenly request i.domain.com/images/name.jpg.

Answer 2

I found a way to solve this problem if all host names use the same virtual host:
# redirect externally if path doesn’t match host name
RewriteCond %{HTTP_HOST} !^i\.example\.com$
RewriteRule ^images/([^/]+)$ http://i.example.com/$1 [L,R=301]
RewriteCond %{HTTP_HOST} !^c\.example\.com$
RewriteRule ^css/([^/]+)$ http://c.example.com/$1 [L,R=301]
# redirect internally to the file
RewriteCond %{HTTP_HOST} ^i\.example\.com$
RewriteRule !^images/ images%{REQUEST_URI} [L]
RewriteCond %{HTTP_HOST} ^c\.example\.com$
RewriteRule !^css/ css%{REQUEST_URI} [L]
This will do the following:
http://example.com/css/foo externally to http://c.example.com/foo
http://c.example.com/foo internally to /css/foo
http://example.com/images/bar externally to http://i.example.com/bar
http://i.example.com/bar internally to /images/bar
As well as correcting mismatching paths and host names:
http://i.example.com/css/foo externally to http://c.example.com/foo
http://c.example.com/images/bar externally to http://i.example.com/bar
A mismatch occurs when the requested stylesheet http://example.com/css/foo is redirected to http://c.example.com/foo and an image URI reference like /images/bar inside the stylesheet is resolved from this new base URI and thus leading to http://c.example.com/images/bar instead of the initial http://example.com/images/bar.