CSS in Rails Asset Path not processed by ERB in development

Question

I have a Rails app with the following in /app/assets/stylesheets/styles.css.erb:

...
#nestedbg {
    background-position: left top;
    backgrou         


        

Answer 1

CSS and ERB

The asset pipeline automatically evaluates ERB. This means that 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' %>) }

This writes the path to the particular asset being referenced. In this example, it would make sense to have an image in one of the asset load paths, such as app/assets/images/image.png, which would be referenced here. If this image is already available in public/assets as a fingerprinted file, then that path is referenced.

If you want to use a data URI — a method of embedding the image data directly into the CSS file — you can use the asset_data_uri helper.

CSS and Sass:

When using the asset pipeline, paths to assets must be re-written and sass-rails provides -url and -path helpers (hyphenated in Sass, underscored in Ruby) for the following asset classes: image, font, video, audio, JavaScript and stylesheet.

image-url("rails.png") becomes url(/assets/rails.png)
image-path("rails.png") becomes "/assets/rails.png".

The more generic form can also be used but the asset path and class must both be specified:

asset-url("rails.png", image) becomes url(/assets/rails.png)
asset-path("rails.png", image) becomes "/assets/rails.png"

Referenced By: Rails Guide Asset Pipe Line

Heading: 2.2.1 and 2.2.2 respectively.