How to Set a Different Background Image for Each Page in Rails 3 Site

How to put different background images for each page in rails?

You can add a class attribute the body tag depending on the action it responds, for instance if you have a foo, bar and meh method in a controller Main, then you can do:

<body class="<%= params[:action] %>">

It'll produce a tag like <body class="foo"> depending on the current action. So then you can create your CSS styles like:

body.foo { ... }
body.bar { ... }
body.meh { ... }

Note if you have more than one method with the same name, you'd probably need to add some extra info to the identifier.

Different background color for different pages in rails

Expanding on the answer provided by @muffinista:
You can use an instance variable set in the controller to determine when to put the 'homepage' class on the body tag. So:

def index
  @home_page = true
  # existing code
end

and in the layout:

<body class="<%= @home_page ? 'homepage' : ''%>">
 <%= yield %>
</body>

Different background for each page?

You can assign class to body like

for homepage

<body class="home">

for about us page

<body class="about">

The you can use css

body.home{background-image:url(greentea.jpg);}
body.about{background-image:url(greentea.jpg);}

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

In your CSS:

background-image: url(background.jpg);

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

CSS Background image on Home Page only, in a Rails App

Declare styles inline for the page you want, if you declare in CSS file and you link those files in several documents than obviously it will take the background image for the respective element

Suppose it is like index.html

<style>
body {
   background-image: url('#');
}
</style>

Or simply declare a class and apply on that particular page

.unique { /* In Your CSS File */
   background-image: url('#');
}

<body class="unique"></body>

Rails 3 application background-image and color pushed to bottom of page

Try the following small modification to the background-position:

html {
      background-color:#ccdbce;
      background-image: url('images/bg-body.png');
      background-repeat: repeat;
      background-position: left top;
      color:#444;
}