Add background image to Rails application when using Bootstrap

Question

I am working on an application using Bootstrap as a framework in Rails (bootstrap-sass). What I want to do is add a sweet background image, but I cannot override the white background of the body no matter what I try.

Has anyone been successful in this? What do I need to change or add to make this happen?

In addition to trying other things, I even tried wrapping all the contents in the body in a div with id, and then calling this class in the user css.scss file, where I successfully configured other aspects of Bootstrap.

The code I added with id:

html body #bgimage { background-image: image-url('/images/cityscape.jpg'); } 

Edit: I just checked the errors on the local development server, and I have this: ActionController :: RoutingError (No route matches [GET] "/assets/images/cityscape.jpg"): / Edit

Thanks!

Answer 1

There was a similar discussion recently, the problem was that background-image strangely doesn't work with bootstrap . Try:

 html body #bgimage { background: url('cityscape.jpg'); } 

Please note that asset-pipeline does its job of finding the right location for your file, so you don't need to specify a path.

Answer 2

If your cityscape.png is located in the assets/images/ directory, use the following:

 html body #bgimage { background-image: url(image_path('cityscape.jpg')); } 

And in order to use the source code, you need to remove /images/ from image-url as:

 html body #bgimage { background-image: image-url('cityscape.jpg'); }