15

This is mentioned in config.rb file

images_dir = "images"

I use 2 folder for images in my projects inside images folder

images
images/background/
images/content/

If any images is inside images/background/ folder then how i should add the path for image in css background and Sass variables?

$header-img: "sass.gif";

and

background-image: url('sass.gif?1327592426');

And how to get rid of this auto generated ?1327592426 from each background image?

Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852

1 Answers1

37

You should use the image-url URL helper. It "generates a path to an asset found relative to the project's images directory" which you defined in your config.rb. You can also set the third parameter $cache-buster to false to remove the generated ?1327592426

Sass:

// image-url arguments:
// $path: path relative to images directory in config.rb
// $path-only: if true, will cause only the path to be returned instead of a `url()` function
// $cache-buster: When set to `false` no cache buster will be used (i.e. `?313420982`)
$header-img: image-url('background/sass.gif', false, false)
background-image: $header-img

Generated CSS:

background-image: url('images/background/sass.gif')
maxbeatty
  • 9,050
  • 3
  • 33
  • 36
  • if i use `$header-img: image-url('background/sass.gif', false, true)` it gives `background-image: url('/images/url('/images/background/sass.gif')');` – Jitendra Vyas Jan 27 '12 at 11:55
  • Just updated answer to be clearer about using $header-img. If you want to define `background-image` in your Sass using `url()`, set the second argument to `true`. Then, you would write `background-image: url($header-img)` in Sass – maxbeatty Jan 27 '12 at 18:32
  • 2
    @JitendraVyas if you don't want the forward slash '/' at the beginning of the image-path, put this line in the `config.rb`-file: `relative_assets = true` – ndequeker Apr 14 '12 at 08:20
  • 3
    @JitendraVyas to set the $cache-buster to false by default, put this line in your config.rb `asset_cache_buster :none` – ndequeker Apr 14 '12 at 08:22
  • Also worth having a look at the [different configuration references](http://beta.compass-style.org/help/tutorials/configuration-reference/) of compass, specifically `images_dir`. – Izhaki Jul 04 '12 at 16:20