CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrapsassbackground-image
marcacyr
marcacyr

Reputation: 405

Add background image to Rails app when using Bootstrap

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

Has anyone had success with this? What do I have to change or add to get this to happen?

In addition to trying other things, I have even tried wrapping all the contents in the body in a div with an id, then calling that class in the custom css.scss file where I have successfully customized other aspects of Bootstrap.

The code I added using the id:

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

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

Thanks!

Upvotes: 5

Views: 7142

Answers (2)

vee
vee

Reputation: 38645

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

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

And to use your original source, you have to remove /images/ from your image-url as: 

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

Upvotes: 0

R Milushev
R Milushev

Reputation: 4315

There was a similar discusion recently, the problem was that background-image oddly does not work with bootstrap. Try:

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

Notice, that asset-pipeline does its work for finding the proper location of your file, so you don't have to mention the path.

Upvotes: 5

Related Questions