Background image doesn't work after assets precompile in RAILS4 production environment

Question

I have following mixin in my application.css.scss file :

@mixin inputwithicon($iconname) {
  padding: 4px 4px 4px 20px;
  border:1px solid #ccc;
  text-indent: 0.30em;
  font-size:15px;
  font-weight:100;
  background: #FFFFFF url(assets/input/#{$iconname}.png) no-repeat;
  background-position: 2% center;
}

This mixin works well on development but after precompiling assets and running in production it stops working (background isn't set).

I tried using image-url instead of url , but it didn't work.

Answer 1

background: #FFFFFF asset-url("assets/input/#{$iconname}.png") no-repeat;

--

In SASS, you would use asset-url ; SCSS asset_url .

Either way, you need to use the above helper so that you when your assets are fingerprinted through precompilation , the correct file being referenced by the pre-processor.

The problem you have is that url just calls a static filename. Whilst not a problem on its own, when you deploy your app, and precompilation occurs, you need to make sure the CSS is referencing the correct filename, hence the helper.

Answer 2

I suggest to you to try one of this case.

1) Put your example.png inside app/assets/images/ and then use:

background-image:image-url("example.png");

2) Put your example.png inside app/public/img/ and then use:

background-image:url("/img/example.png");

Then indicate other css styles in this way:

background-repeat: no-repeat;
background-color: #FFFFFF;

Hope it helps!