Background images with asset pipeline

Question

This should be a simple thing but for some reason it won't work.

I'm having trouble getting a background image displayed on my page. I'm using Rails 3.2 with the asset pipeline. I am trying to display it on pages related to my home controller.

The image location is: app/assets/images/dna.jpg

home.css.scss

background: url('/assets/images/dna.jpg');

I've also tried the following:

background: url('dna.jpg');
background: url('/assets/dna.jpg');
background-image: image-url("dna.jpg");
background-image:url(image_path('dna.jpg'));

Regardless of which approach I try, I get the same error:

Sass::SyntaxError at /
Invalid CSS after "background:": expected pseudoclass or pseudoelement, was "   url('/assets/i..."

(in /Users/sean/Dropbox/bin/rails/assay/app/assets/stylesheets/home.css.scss)

See also this SO post: Adding a background image in Ruby on Rails 2 in CSS

EDIT

Referring to this post: sass-rails asset pipeline: generating image paths incorrectly; `url(/images/blah.png)` instead of `url(/assets/blah.png)`

I cleared the asset cache

rake tmp:cache:clear

And bundle updated my sass-rails gem. It's at 3.2.6 now. None of that made any difference.

Answer 1

I suspect a very simple reason for your troubles: indentation. Most of the times in scss it happens that there is no space after the statement, in your case background:. Try also this in your scss prefixed file:

background: url(dna.jpg);

It always works for me.