Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Background images path in Sass and Compass

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?

like image 354
Jitendra Vyas Avatar asked Jan 26 '12 16:01

Jitendra Vyas


People also ask

How do I put a background image on a path?

Usage is simple — you insert the path to the image you want to include in your page inside the brackets of url() , for example: background-image: url('images/my-image. png');


1 Answers

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')
like image 155
maxbeatty Avatar answered Oct 26 '22 11:10

maxbeatty