Book Image

Sass and Compass for Designers

By : Ben Frain
Book Image

Sass and Compass for Designers

By: Ben Frain

Overview of this book

Table of Contents (17 chapters)
Sass and Compass for Designers
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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 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(...