Background images path in Sass and Compass
56,910
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')
Author by
Jitendra Vyas
Hi, I am Jitendra a front-end developer from India specializing in web standards, accessibility, and usability based development.
Updated on January 28, 2020Comments
-
Jitendra Vyas over 4 years
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 cssbackground
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 over 12 yearsif i use
$header-img: image-url('background/sass.gif', false, true)
it givesbackground-image: url('/images/url('/images/background/sass.gif')');
-
maxbeatty over 12 yearsJust updated answer to be clearer about using $header-img. If you want to define
background-image
in your Sass usingurl()
, set the second argument totrue
. Then, you would writebackground-image: url($header-img)
in Sass -
ndequeker about 12 years@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 about 12 years@JitendraVyas to set the $cache-buster to false by default, put this line in your config.rb
asset_cache_buster :none
-
Izhaki almost 12 yearsAlso worth having a look at the different configuration references of compass, specifically
images_dir
.