Rails6の本番環境で背景画像が表示されない

Question

/*
*= require_tree .
*= require_self
*/

@import "reset";
@import "bootstrap/scss/bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "navbar";
@import "roads";
@import "users";
@import "homes";

body {
font-family: "Noto Sans JP";
}

.pagination {
justify-content: center;
color: #002550;
}お世話になっております。
Rails6でアプリを作成しているのですが、背景画像が表示されずに困っております。
お手数をおかけしますがアドバイスをいただければ幸いです。

本番環境

Ruby2.7.2
Ruby on Rails6.1
Bootstrap4.5
デプロイ: AWS EC2
WEBサーバー: nginx
アプリケーションサーバー: puma

やりたいこと

TOPページの背景を本番環境で表示したい

発生しているエラー

背景画像が表示されないです。
本番環境にpullしたあとにpumaを再起動したのですが、文字/ボタン等のCSSは適用されているのにも関わらず、背景画像, 背景カラー, overlayが表示されていません。

試してみたこと

• 新規にpublic/assets/imagesディレクトリを作り、配下に画像を配置

• config/environments/production.rbのconfig.assets.compileをtrueに修正

• CSSのimage-urlに修正

• デベロッパーツールで該当タグのCSSを確認

該当の箇所のcssは以下の通りで、
backgroud: transparent;配下にbackgroud-image: initial;がある状況。
開発環境では問題なく表示されます。

element.style {
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
     background-image: initial;
     background-position-x: initial;
     background-position-y: initial;
     background-size: initial;
     background-repeat-x: initial;
     background-repeat-y: initial;
     background-attachment: initial;
     background-origin: initial;
     background-clip: initial;
    background-color: transparent;
}

参考記事

https://qiita.com/ebkn/items/249fa1caa704f69809ad

ソースコード

homes/index.html.erb

<div class="main-container overlay">
  <div class="container px-4 px-lg-5 h-100">
    <div class="row gx-4 gx-lg-5 h-100 align-items-center justify-content-center text-center">
      <div class="col-lg-8 align-self-end">
          <h1 class="title-text">アプリ名</h1>
          <hr class="divider" />
      </div>
      <div class="col-lg-8 align-self-baseline">
          <p class="sub-text">アプリ説明</p>
          <% if user_signed_in? %>
            <%= link_to "アプリトップへ", posts_path, class: "btn warning-btn" %>
          <% else %>
            <div class="my-3">
              <%= link_to "ログインはこちら", user_session_path, class: "btn warning-btn" %>
            </div>
            <div class="my-3">
              <%= link_to "ゲストログイン", users_guest_sign_in_path, method: :post, class: "btn warning-btn" %>
            </div>
          <% end %>
      </div>
    </div>
  </div>
</div>

// homes.scss

.page-section {
  background-color: #002550;
  height: 800px;
  width: 100%;
  background-size: cover;

}

.main-container {
  background-image: image-url('top.png');
  height: 800px;
  width: 100%;
  background-size: cover;
}

.overlay:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.4);
    height: 800px;
}

// application.scss

/*
 *= require_tree .
 *= require_self
 */

@import "reset";
@import "bootstrap/scss/bootstrap";
@import "font-awesome-sprockets";
@import "font-awesome";
@import "navbar";
@import "posts";
@import "users";
@import "homes";

body {
  font-family: "Noto Sans JP";
}

.pagination {
  justify-content: center;
  color: #002550;
}