Changing image area / path in css for production?

Question

Currently, for things like background images, our css files do not have a specified domain. This works both in our development environment and in the production environment.

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

For performance reasons (domain without cookies) we would like to include this:

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

Ideally, we will not hard code them, so our development environments can still be retrieved locally.

Any thoughts on how best to achieve this?

Answer 1

I would suggest placing CSS files in a domain without cookies, not just images. Then you can use relative paths that will work both in production and in any other environment.

If you decompose your CSS file into a domain without cookies:

 http://staticimagedomain.com/main.css 

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

CSS files do not need cookies.

Answer 2

Write to hosts file to redirect staticimagedomain.com to localhost or wherever your test pages are?

Not a great solution, but quick and easy.

Answer 3

To add to other reasonable answers: It is sometimes useful to have two stylesheets, one for the other, for development, with several differences (for example, some color colors) that help visually identify instances and prevent confusion. Your build-deploy script (Ant) will take care of moving the css files during the transition to production.

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