Why is my background image not displaying?

Question

I have a style.css.erb file in my rails app.

I want to display a background image so I added the line with a rails helper method:

background: image-url('bnr-01.jpg') no-repeat;

The image is not displayed.

I get the error 'Invalid property valid'

The css that's generated is:

background: image-url(bnr-01.jpg) no-repeat;

Answer 1

Since you are saying it is css.erb file you should use the rails helper as,

Use <%= asset_path 'bnr-01.jpg' %> rails helper

background-image: url(<%= asset_path 'bnr-01.jpg' %>)

You can also use,

image_url("bnr-01.jpg")

You used image-url which is wrong use, image_url

Here is the reference

Answer 2

To load background image, the following is the code to be added in css,

background-image: url("/assets/bnr-01.jpg");

this will solve your issue. Hoping that the background image is placed in app/assets/images.

Answer 3

as in the comments told, use background: url("path/to/picture.jpg") no-repeat; The quote-characters around the path are optional.

http://www.w3schools.com/cssref/pr_background-image.asp