Rails: How to Set a Background Image in Rails from CSS

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

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

How to add background image in Ruby on Rails

Try in your css:

#boxy{
  background: image-url('background1.jpg') no-repeat;
}

Or directly in your view:

<%= image_tag('background1.jpg', style: "height: 30px; width: 30px") %>

add background image with SCSS in Ruby on Rails

When working with CSS files and images you have two options url and path:

• image-url("logo.png") # url(/assets/logo.png)
• image-path("logo.png") # "/assets/logo.png"

If you want to work with images, font, video, audio, JavaScript and/or stylesheet files then you can use the generic form

• asset-url("logo.png") # url(/assets/logo.png)
• asset-path("logo.png") # "/assets/logo.png"

See the ActionView::Helpers::AssetUrlHelper for further information.

Adding a background image in Ruby on Rails 2 in CSS

The webserver in rails takes public folder as the base of the application. Hence its looking for the specific image under /public/images/ instead of app/assets/images/"dep.jpg" & since its not there over there you cannot get the image. Try to put your image in /public/images/ folder then it would work.

Edit: If you are using rails 3.1 then this would be different as Rails 3.1 uses the concept of asset pipeline for the assets of your application so then then path app/assets/images/dep.jpg would obviously work.

How to add a background image inline style to link tag Rails

You can do something like this:

:style => "background-image: url(#{image_path "avatar.png"})"

To find more about image_path.

---

Related Topics