Add a background image to a Ruby on Rails app using Bootstrap CSS

Seems like something very simple to do, and it is.  Although it took me half an hour of searching Stack Overflow and playing with the code to get it to work.  Several sites showed what code to write, but very few showed where to put the code.  Here’s what I did, using Rails 4 and Bootstrap 3.

UPDATE: Thanks to Rene Paulokat and Roberto Trevisan for their help and comments, I’ve improved several things here.

Go to /stylesheets/scaffolds.css.scss 

in the body block, add this code for the image

background: url('/assets/fire_breathing.jpg');
background-image: image-url('fire_breathing2.jpeg');
background-repeat: no-repeat;
background-size: 100%;

Then put the image you want to be your background into "app/assets/images/backgroundimage.jpeg" in whatever format you want.

Edit: Two things to note here. 1) As per Roberto’s comments, I used the tag “image-url” instead of just “url”.  I believe this now allows the image to be loaded in the rails asset pipeline.  2) you don’t need the ‘/assets/’ in front of the image path.  Rails and the asset pipeline will automatically check in the ‘app/assets/images’ folder, so you don’t need any leading path, unless you make a folder within that folder.

The background-size line makes the image fit exactly to its parent attribute, which in this case is the body of the html document.

Note that for production, for example if deployed on heroku, you will need to change the location of the image to the /public folder because thats where it will look for images in production.  Put your image in that folder, than update the image url to:

background: url('/fire_breathing.jpg');

Edit: The above turns out was incorrect.  Per Roberto’s comments, the development and production code should usually be identical. By making the edit above using the “image-url” tag, the app will look in the ‘app/assets/images’ folder, so we don’t need anything in the public folder.  However, I still needed to run:

RAILS_ENV=production bundle exec rake assets:precompile

to precompile the assets in production.

Also note, simply having the slash “/” in front of the image file name can make this not work.

Hope this is helpful to you!

Screen Shot 2014-01-24 at 5.55.05 AM

Advertisements

5 Responses to Add a background image to a Ruby on Rails app using Bootstrap CSS

  1. Pingback: What I learned today | Add a background image to a Ruby on Rails app using Bootstrap CSS

  2. gerarddawson says:

    Thank you so much. Been having the same experience of learning rails, searching stack overflow, feeling frustrated, etc.

  3. Atsuki says:

    Thanks!

  4. This was helpful, thank you! What if you only want the image on one page though, not every page?

    • Then put it as an attribute to the background of a specific class. Then on that page specific html (in the view), add that class onto the body. For example, if you want it on your `/about` page, then in your view file `/about.html.erb`, add that class to the body. For example:

      `
      this is the body
      `

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: