Rails: How to set a background image in rails from css?

Question

I am using rails 3.2 and i have to set a background for one of the page and i have tried many ways and nothing went right, so looking for some good help. I have tried

Answer 1

If you have the image in your public directory like public/bg.jpg

background-image: url('/bg.jpg')

If you have image in app/assets/images/bg.jpg

 background-image: url('/assets/bg.jpg')

Answer 2

In your CSS:

background-image: url(background.jpg);

or

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

In environments/production.rb:

# Disable Rails's static asset server (Apache or nginx will already do this)  
config.serve_static_assets = false

# Compress JavaScripts and CSS  
config.assets.compress = true

# Don't fallback to assets pipeline if a precompiled asset is missed  
config.assets.compile = false

# Generate digests for assets URLs  
config.assets.digest = true

Answer 3

If you are using sass (scss), use image-url function:

body {
  background-image: image-url('texture.png'); // link to /assets/images/texture.png
}

Answer 4

[CONTEXT] Ruby 2.6.3 | Rails 6.0.1 | Using webpack to bundle stylesheets.

I realized I couldn't deliver images from the asset pipeline in [s]css from webpack files: for instance, Asset Helpers from sass-rails are unavailable.

After some struggle, I found the solution on https://stackoverflow.com/a/57175231/8131629

Answer 5

Try the code below:

.background-style {
    background-image: url("../images/background.jpg");
}

Answer 6

if you have your image into app/assets/images and its name is 'zi-fullscreen-bg.png', for example then you can use

.hero-unit.fullscreen-image-bg {
  background-image: url('zi-fullscreen-bg.png');
}

at least it worked for me!