Adding a Background Image in Ruby on Rails 2 in CSS

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.

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

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.

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") %>

Ruby on Rails : Background CSS Image from Database

Calling Rails Database queries in CSS stylesheet will not work. Instead you can rework on the HTML code like the below,

<header style="background-image: url(<%= Image.find(1).path %>);">

and remove the background image code in the CSS.

---

Related Topics