前提・実現したいこと
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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。