herokuでback-ground-imageを表示させたい。

環境

ruby 2.6.5
rails 6.0.0
mysql 5.6

問題

ローカル環境では問題なく表示されていた背景画像が本番環境（heroku)では表示されていなかった。

試したこと

config/environments/production.rb

# Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = false

から

config/environments/production.rb

# Do not fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = false

に変更
参照記事→https://qiita.com/___xxx_/items/fa15f358beba2b9389da

しかし期待された挙動はうまく行かなかった。

他の記事でも大概この内容で本番環境で挙動がうまく行っている傾向にあるものの、自分はダメだった。

解決策

2015年の少し古い記事を発見→https://www.cotegg.com/blog/?p=189
試してみる。

①cssからscssに変更

②合わせてscssの内容も変更

main.css

.main {
  display: flex;
  background-image: url("../main-bg.png");      /* 画像のURLを指定       */
  background-size:cover;
  background-repeat:  no-repeat;
  background-attachment: fixed;
}

から

main.scss

.main {
  display: flex;
  background-image: image-url("main-bg.png");      /* ここの記述を変更       */
  background-size:cover;
  background-repeat:  no-repeat;
  background-attachment: fixed;
}

に変更
ローカル環境で不具合がないことを確認

③プリコンパイル実施

% bundle exec rake assets:precompile RAILS_ENV=production

ここでコミットして本番環境にpushすることを忘れないこと。

% git push heroku master

本番環境にて挙動を確認。

うまく行った。