Asset Pipeline Background Images

Question

It should be simple, but for some reason it will not work.

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

Image location: application / assets / images / dna.jpg

home.css.scss

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

I 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')); 

No matter what 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 publication: Adding a Background Image to Ruby on Rails 2 in CSS

EDIT

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

I cleared the resource cache

 rake tmp:cache:clear 

And the package updated my sass-rails gem. It is now at 3.2.6. None of this mattered.

Answer 1

I suspect a very simple reason for your problems: indentation. In most cases, in scss it happens that after the statement there is no place, in your case background: Try also in your scss prefix file:

 background: url(dna.jpg); 

He always works for me.

Answer 2

I found a workaround: I turned the scss file into a regular css file.

home.css

 body {background-image:url('dna.jpg'); background-size:cover;} 

Now it works great. However, this does not seem to be the right solution.

Answer 3

I had the same problem and this was the result of using Sass Indented Syntax in the SCSS file.

Additional information on the differences between Sass and SCSS: http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html