Changing image domain / path in css for production?

Question

Currently, for things like background images, our css files have no domain specified. This works both in our development and production environments.

background-image: url(/images/bg.png);

For performance reasons (cookie-less domain), we'd like to switch this:

background-image: url(http://staticimagedomain.com/images/bg.png);

Ideally, we don't hard code those, so our development environments can still pull locally.

Any thoughts on how to best achieve this?

Answer 1

Entry in the hosts file to redirect staticimagedomain.com to localhost or wherever your test pages serve from?

Not a great solution, but quick and easy.

Answer 2

I would suggest hosting the CSS files in the cookie-less domain as well, and not just the images. Then you would be able to use relative paths, which will work both in production and in any other environment.

If you deploy your CSS file to the cookie-less domain:

http://staticimagedomain.com/main.css

Then you can leave the relative URLs /images/bg.png, which will work fine from both environments.

CSS files don't need cookies anyway.

Answer 3

To add to the other sensible answers: Sometimes is useful to have two stylesheets, one for production other for development, with just a few differences (eg: some background-colors) to help identify visually the instances and prevent confusions. Your build-deployment script (Ant) would take care of moving the css files when going to production.

If you are doing this (or think it would be good to do this), then your question has a trivial answer.