0

I've just started to work with the rails asset pipeline, I'm a front-end guy. I'm trying to use image-url helper within sass files so that I don't have to hard-code the path.

The following SASS

.some-class
  background: image-url("image.png")

generates the following CSS

.some-class{
  background: url("asset/image.png");
}

How do I use the image-url helper to generate the following css, without hard-coding the image path ? 

.some-class{
  background: url("asset/image.png") no-repeat 0 0 #fff;
}
letronje
  • 9,002
  • 9
  • 45
  • 53
Chandrakant
  • 1,971
  • 1
  • 14
  • 33

2 Answers2

0

You can use, 

.some-class
  background-image: image-url("image.png")
  background-repeat: no-repeat;
  background-color: #fff;

and so on.

or 

 background: #fff image-url("image.png") no-repeat 0 0;

should work.

maximus ツ
  • 7,949
  • 3
  • 25
  • 54
-1

You propably should use:

background-image: asset-url("image.png", image) no-repeat 0 0 #fff;

The asset-url is a sass/rails feature, which lets the asset pipeline do some (production) work for you. You can read about that feature here.

Using the helper is preferable over a plain url("image.png"), as it gives you finger printed URLs in production. See this StackOverflow answer.

Community
  • 1
  • 1
tessi
  • 13,313
  • 3
  • 38
  • 50
  • It should work, what is the excat error? Maybe replace `asset-url("image.png", image)` with `image-url('image.png')`. – tessi Apr 15 '13 at 06:23
  • You might want to have a look at the following StackOverflow question: http://stackoverflow.com/questions/9304607/sass-rails-helpers-image-url-asset-url-are-not-working-in-rails-3-2-1?rq=1 It gives some additional pointers (esp. is your file included in the asset precompile list?) – tessi Apr 15 '13 at 07:10