How to show a background image in ruby on rails

Question

I am running ruby 2.3.0 and rail 5.0. When trying to display an background image on a view, I use the following CSS class:

.header_img{
   width:100%;
   height: 400px;
   background: url("../../assets/images/home/home-header.jpg");
}

The image is located in the home subfolder under the image assets folder. I have tried trying to find a solution on here but have not been able to find one that works any help would be awesome.

I am using Rubymine as my IDE and nothing seems to work.

Solution 1

There is no need to provide absolute path as your image is in assests so you can directly do something like this

background-image: url('image.png')

Solution 2

You should have a look at the asset-pipe line, see "2.3.1 CSS and ERB":

http://guides.rubyonrails.org/asset_pipeline.html

The asset pipeline automatically evaluates ERB. This means if you add an erb extension to a CSS asset (for example, application.css.erb), then helpers like asset_path are available in your CSS rules:

.class { background-image: url(<%= asset_path 'image.png' %>) }

Solution 3

You can use image_url helper without renaming the file to .erb. You just need to add extension .scss. For eg. main.css.scss and add the line like this:

background-image: image_url('/home/image.png')

Solution 4

I have a similar folder structure to you, and I have used a background image successfully.

Have a try of this code instead and see if it works

background-image:url('/assets/home/home-header.jpg');

Also just for extra, if you want a fixed, non repeating background image that covers the whole page add this css underneath ^that line

background-size:cover; 
background-repeat:no-repeat;
background-attachment:fixed;
height:100%;

Solution 5

I am using this approach. Its the best way to include the compiled assets.

.class {
background-image: asset-url('image.png');
}

View more solutions

Comments

[John Bome]

That doesn't work for me. All it does is give me this in the code background-image: url('image.png')

[Divya Sharma]

can you please try like this background-image: url("../../assets/images/home/home-header.jpg") by giving absolute path

[Divya Sharma]

check this hope it should work stackoverflow.com/questions/18100650/…

[John Bome]

I'm still not having much luck with it. I am using ruby mine as my IDE and i am getting cannot resolve file.

[John Bome]

My IDE says cannot find asset_path

[Roger]

@JohnBome Did you rename the css to css.erb? How does the css look if you run the app. (check the source) ?

[Radu Ciobanu]

background-image: image_url('other-folder/image.png') if your image is in app/assets/images/other-folder/image.png. Works in Rails 5.