4

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.

Community
  • 1
  • 1
port5432
  • 5,889
  • 10
  • 60
  • 97

3 Answers3

5

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.

R Milushev
  • 4,295
  • 3
  • 27
  • 35
1

I found a work-around: turned the scss file into a normal css file.

home.css

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

Now it works fine. It doesn't seem like the right solution though.

port5432
  • 5,889
  • 10
  • 60
  • 97
  • 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. – R Milushev Jul 07 '13 at 14:21
  • @Qumara SixOneTour you are correct. Please add it as an answer so I can accept it. – port5432 Jul 07 '13 at 16:25
  • 1
    I am happy when I can help. Good luck with your application. – R Milushev Jul 07 '13 at 17:39
1

I had the exact same issue and it was a result of me using Sass Indented Syntax in an SCSS file.

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

Daryl Wright
  • 81
  • 1
  • 8