Award-Winning Fjords Thomas Reynolds

Simplify image paths with image_url()

Recently Compass introduced a Sass method called image_url() which allows you to refer to images by their file name only. When the Sass is compiled, the CSS url() method is populated with a path generated by Compass.

When you start a new project using the compass command-line tool, it will generate a config.rb file which contains options specific to your new project. There is a variable called httpimagespath which is used by Compass to generate the correct image paths. I have the value setup for this site as such

http_images_path = "/wp-content/themes/default/images/"

Now when I use the image_url() method for the header on this site:

h1
  background= image_url("title-embellishment.gif") "no-repeat" 17px 7px

It will generate this CSS:

h1 {
  background: url(/images/title-embellishment.gif) no-repeat 17px 7px; }

This makes it trivial to change image paths for the entire site with one line in config.rb. Never again worry about relative paths, ../../images/ and the like.