Sass and Compass for Designers

Adding background images with the Compass image-url helper

With CSS, when you want to use a background image, it's usually necessary to provide the relative path to the image from the CSS. Here's an example:

background-image: url("../img/amazon-com.svg");

If you're anything like me, there's often a 'hunt the image path' game that happens on a new project, caused by trying to figure out and set the correct path to the image. For example, is the path to the images ../img/, ./img, /img, or just img? Thankfully, with Compass the image-url helper has us covered. Remember back in Chapter 2, Setting Up a Sass and Compass project, we looked at the config.rb file. One of the configuration options we set was this:

images_dir = "img"

This lets us target images ...