Rails How to reference images in CSS within Rails 4

Question

There s a strange issue with Rails 4 on Heroku   When images are compiled they have hashes added to them  yet the reference to those files from within CSS don t have the proper name adjusted   Here s what I mean   I have a file called logo png  Yet when it shows up on heroku it is viewed as    assets logo-200a00a193ed5e297bb09ddd96afb953 png   However the CSS still states   background-image url    logo png      The result  the image doesn t display   Anybody run into this   How can this be resolved

User · Answer

In some cases the following can also be applier logo   background  url  lt    asset data uri  logo png    gt     Source  http   guides rubyonrails org asset pipeline html

User · Answer

When using gem  sass-rails   in Rails 5  bootstrap 4  the following worked for me   in  scss file       background-image  url asset path  black left arrow svg       in view file e g   html slim        style   background-image  url    show image path  event background png

User · Answer

Sprockets together with Sass has some nifty helpers you can use to get the job done  Sprockets will only process these helpers if your stylesheet file extensions are either  css scss or  css sass     Image specific helper   background-image  image-url  logo png       Agnostic helper   background-image  asset-url  logo png   image  background-image  asset-url  asset   asset-type      Or if you want to embed the image data in the css file   background-image  asset-data-url  logo png

User · Answer

In Rails 4  simply use   hero     background-image  url  picture jpg         in your style css file as long as the background image is tucked in app assets images

User · Answer

WHAT I HAVE FOUND AFTER HOURS OF MUCKING WITH THIS   WORKS    background-image  url image path  transparent 2x2 png          how to add attributes like repeat  center  fixed    The above outputs something like    assets transparent 2x2-ec47061dbe4fb88d51ae1e7f41a146db png   Notice the leading      and it s within quotes  Also note the scss extension and image path helper in yourstylesheet css scss   The image is in the app assets images directory   Doesn t work   background  url image path  transparent 2x2 png   repeat center center fixed    doesn t work  invalid property   background url  assets pretty photo default sprite png  2px 1px repeat center fixed    My last resort was going to be to put these in my public s3 bucket and load from there  but finally got something going

User · Answer

None of the answers says about the way  when I ll have  css erb extension  how to reference images  For me worked both in production and development as well    2 3 1 CSS and ERB  The asset pipeline automatically evaluates ERB  This means 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  lt    asset path  image png    gt       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    logo   background  url  lt    asset data uri  logo png    gt       This inserts a correctly-formatted data URI into the CSS source   Note that the closing tag cannot be of the style -

User · Answer

Only this snippet does not work for me   background-image  url image path  transparent 2x2 png       But rename stylename scss to stylename css scss helps me

User · Answer

The hash is because the asset pipeline and server Optimize caching http   guides rubyonrails org asset pipeline html  Try something like this    background-image  url image path  check png       Goodluck

User · Answer

You can add to your css  erb extension  Ej  style css erb  Then you can put   background  url  lt    asset path  logo png    gt   no-repeat

User · Answer

Interestingly  if I use  background-image   it does not work   background-image  url  picture png      But just  background   it does   background  url  picture png

User · Answer

In css   background  url   assets banner jpg      although the original path is  assets images banner jpg  by convention you have to add just  assets  in the url method

User · Answer

This should get you there every single time   background-image  url  lt    asset data uri  transparent 2x2 png   gt

User · Answer

This worked for me   background   4C2516 url  imagename png   repeat-y 0 0

User · Answer

By default Rails 4 will not serve your assets  To enable this functionality you need to go into config application rb and add this line   config serve static assets   true   https   devcenter heroku com articles rails-4-asset-pipeline serve-assets

User · Answer

Referencing the Rails documents we see that there are a few ways to link to images from css  Just go to section 2 3 2   First  make sure your css file has the  scss extension if it s a sass file   Next  you can use the ruby method  which is really ugly    logo   background  url  lt    asset data uri  logo png    gt       Or you can use the specific form that is nicer   image-url  rails png   returns url  assets rails png  image-path  rails png   returns   assets rails png    Lastly  you can use the general form    asset-url  rails png   returns url  assets rails png  asset-path  rails png   returns   assets rails png

User · Answer

In Rails 4  you can reference an image located in assets images  in your  SCSS files easily like this    some-div     background-image  url image-path  pretty-background-image jpg           When you launch the application in development mode  localhost 3000   you should see something like   background-image  url   assets pretty-background-image jpg      In production mode  your assets will have the cache helper numbers   background-image  url   assets pretty-background-image-8b313354987c309e3cd76eabdb376c1e jpg

User · Answer

Don t know why  but only thing that worked for me was using asset path instead of image path  even though my images are under the assets images  directory   Example   app assets images mypic png   In Ruby   asset path  mypic png     In  scss   url asset-path  mypic png        UPDATE   Figured it out- turns out these asset helpers come from the sass-rails gem  which I had installed in my project

[ruby-on-rails] Rails: How to reference images in CSS within Rails 4

logo { background: url(<%= asset_data_uri 'logo.png' %>) }

Examples related to ruby-on-rails

Examples related to heroku

Examples related to ruby-on-rails-4