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

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

新規登録して質問してみよう
ただいま回答率
85.37%
Ruby on Rails

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

975閲覧

背景画像を画面全体に表示したいです。

morfonica

総合スコア33

Ruby on Rails

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/08/13 16:48

前提・実現したいこと

Ruby on Railsでwebアプリを作っています。
背景画像を設定中に問題が発生しました。

発生している問題・エラーメッセージ

両サイドに隙間ができます。

### 対象のコード

view

1<div class="container top-bg"> 2 <div class="row"> 3 <div class="mx-auto"> 4 <h1>welcome to <strong>RELEASE</strong> !</h1> 5 <p>ここはあなたのためだけのコミュニティです!</p> 6 <div class="mx-auto"> 7 <% if customer_signed_in? %> 8 <div class="row"> 9 <%= link_to "ログイン", posts_path, class: 'btn btn-info btn-sm btn-block mb-3 sign_in' %> 10 </div> 11 <div class="row"> 12 <%= link_to "新規登録", posts_path, class: 'btn btn-success btn-sm btn-block sign_up' %> 13 </div> 14 <% else %> 15 <div class="row"> 16 <%= link_to "ログイン", new_customer_session_path, class: 'btn btn-info btn-sm btn-block mb-3' %> 17 </div> 18 <div class="row"> 19 <%= link_to "新規登録", new_customer_registration_path, class: 'btn btn-success btn-sm btn-block' %> 20 </div> 21 <% end %> 22 </div> 23 </div> 24 </div> 25 </div>

scss

1* { 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5} 6 7main { 8 background-color: #c8f3fa; 9} 10 11// header 12li{ 13 display: inline-block; 14 margin: 0 20px; 15} 16 17// .top-bg { 18// background-image: url('top_bg.jpeg'); 19// width: 100%; 20// height: 600px; 21// background-size: cover; 22// } 23.top-bg { 24 height: 600px; 25 /* 画像ファイルの指定 */ 26 background-image: url(top_bg.jpeg); 27 28 /* 画像を常に天地左右の中央に配置 */ 29 background-position: center center; 30 31 /* 画像をタイル状に繰り返し表示しない */ 32 background-repeat: no-repeat; 33 34 /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */ 35 background-attachment: fixed; 36 37 /* 表示するコンテナの大きさに基づいて、背景画像を調整 */ 38 background-size: cover; 39 40 /* 背景画像が読み込まれる前に表示される背景のカラー */ 41 background-color: #464646; 42}

試したこと

colを全て削除しました。
heughtをありえないくらい広げても同じでした。

補足情報(FW/ツールのバージョンなど)

rails version 5.2.6

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

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

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

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

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

guest

回答1

0

ベストアンサー

何かしらcssフレームワークを使っていると思われるので、そのことを記載されたほうが良いと思います。
おそらくcssフレームワークで.containerに横幅に関わるスタイルが書かれているので、横いっぱいにならないのだと思います。
ブラウザのデベロッパーツールで要素のスタイルを確認してみてください。

対策としては親要素を作って、そちらに背景を設定すると良いのではないでしょうか。

投稿2021/08/14 00:37

webgoto

総合スコア1293

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.37%

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

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

質問する

関連した質問