Image paths in CSS to support CDN

Question

I am trying to deploy our images to a cdn. Currently the css has relative paths to images on our site. These paths will need to support the CDN image location. Does anyone have advice on how I can do this?

Or if anyone has a good tutorial on deploying to a CDN.

---

This is how I ended up accomplishing this.

1. I used SASS - http://sass-lang.com/
2. I have a mixin called cdn.scss with content like $image_path: "/images/";
3. Import that mixin in the sass style @import "cdn.scss"
4. Update image paths as such: background: url($image_path + "image.png");
5. On deployment I change the $image_path variable in the mixin.scss and then rerun sass

UPDATE

We use bash to update the file

cat > preprocess/sass/_cdn.scss <<EOT
\$image_path: "//CDN_URL/";

Example code in the _cdn.scss

$image_path: "/public/images/";

Then it works by default locally, but on production push, we run the bash script to update using the cdn location

Answer 1

Probably the easiest thing would be to host both your images and CSS file on the CDN. Image paths in your CSS file are relative to the CSS file itself, so you won't have to change your CSS at all.

If that's not an option, you're stuck putting the fully qualified URLs in your stylesheet. Now, if you really wanted to, you could generate your CSS file dynamically on the fly, and perform some replacement so you don't actually have to hard code the CDN in your sheet.