title: Rails 6/webpacker... how get background images to work BOTH in development and on Heroku?
body: <p>In a Rails 6 app, I have an image file in app/assets/images/bgs/abc.jpg</p>
  <p>To attach that image to <code>body</code> background, how can I have a style declaration in a <code>style</code> tag in application.html.haml that works the <strong>same</strong> for <strong>both</strong> local development and when pushed to heroku?</p>
  <p>Works in development, but not Heroku, due I suppose to asset handling differences:</p>
  <pre><code>#application.html.haml
  %style
    body::after {
    content: &quot;&quot;;
    background: url(&quot;/assets/bgs/abc.jpg&quot;);  ### WORKS DEVT ONLY ###
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.12;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    background-attachment: fixed;
    z-index: -1;   
    }
  </code></pre>
  <p>I understand I should be using asset_path but none of these work in development:</p>
  <pre><code>background: asset_path(&quot;/bgs/abc.jpg&quot;);
  background: asset_path(&quot;bgs/abc.jpg&quot;);
  background: asset_url(&quot;/bgs/abc.jpg&quot;);
  background: asset_url(&quot;bgs/abc.jpg&quot;);
  </code></pre>
  <p>There is a spectacular amount of inconsistent information out there, some cases saying use asset-url or asset-path, some cases saying asset_url or asset_path, and even some cases saying use url(~filename.jpg), some say use background: some say background-image.</p>
  <p>Is there a simple way to use a background image with the exact same code working both on development and Heroku?</p>