質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

0回答

1143閲覧

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

husqy

総合スコア2

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2021/07/28 02:26

編集2022/01/12 10:55

/*
*= 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

ソースコード

HTML

1homes/index.html.erb 2 3<div class="main-container overlay"> 4 <div class="container px-4 px-lg-5 h-100"> 5 <div class="row gx-4 gx-lg-5 h-100 align-items-center justify-content-center text-center"> 6 <div class="col-lg-8 align-self-end"> 7 <h1 class="title-text">アプリ名</h1> 8 <hr class="divider" /> 9 </div> 10 <div class="col-lg-8 align-self-baseline"> 11 <p class="sub-text">アプリ説明</p> 12 <% if user_signed_in? %> 13 <%= link_to "アプリトップへ", posts_path, class: "btn warning-btn" %> 14 <% else %> 15 <div class="my-3"> 16 <%= link_to "ログインはこちら", user_session_path, class: "btn warning-btn" %> 17 </div> 18 <div class="my-3"> 19 <%= link_to "ゲストログイン", users_guest_sign_in_path, method: :post, class: "btn warning-btn" %> 20 </div> 21 <% end %> 22 </div> 23 </div> 24 </div> 25</div>

CSS

1// homes.scss 2 3.page-section { 4 background-color: #002550; 5 height: 800px; 6 width: 100%; 7 background-size: cover; 8 9} 10 11.main-container { 12 background-image: image-url('top.png'); 13 height: 800px; 14 width: 100%; 15 background-size: cover; 16} 17 18.overlay:before { 19 position: absolute; 20 content: ""; 21 left: 0; 22 bottom: 0; 23 right: 0; 24 top: 0; 25 background: rgba(0, 0, 0, 0.4); 26 height: 800px; 27}

CSS

1// application.scss 2 3/* 4 *= require_tree . 5 *= require_self 6 */ 7 8@import "reset"; 9@import "bootstrap/scss/bootstrap"; 10@import "font-awesome-sprockets"; 11@import "font-awesome"; 12@import "navbar"; 13@import "posts"; 14@import "users"; 15@import "homes"; 16 17body { 18 font-family: "Noto Sans JP"; 19} 20 21.pagination { 22 justify-content: center; 23 color: #002550; 24} 25

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問