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 for backgrounds easily from within our Sass files, no matter where they are in our project. It doesn't matter whether a style is buried in a partial file three 'levels' away from the image, we can still just do this:
background-image: image-url(...