cloud9上で
ちょっとしたアプリを作っています。
トップページに背景画像を追加したいのですが
画面下部に余白ができてしまい、画面いっぱいに表示されません。
調べてみていろいろ試しているのですが
うまくいかないのでご教示いただければ幸いです。
よろしくお願いいたします。
該当CSS
css
1.signinPage { 2 margin: 30px, 0px, 0px, 0px; 3 background-image: url("student-849822_1280.jpg"); 4 background-size: 100% 100%; 5 6 .title { 7 margin: 0; 8 text-align: center; 9 color:white; 10 } 11 .new_user { 12 .form-group { 13 max-width: 500px; 14 margin: 0 auto 1rem; 15 .form-control { 16 background: #f6f8fa; 17 } 18 } 19 } 20 .loginBtn { 21 padding: 12px; 22 width: 200px; 23 border-radius: 21px; 24 background: #29b744; 25 color: #fff; 26 text-align: center; 27 border: none; 28 margin-top: 20px; 29 opacity: 1; 30 transition: opacity .5s; 31 cursor: pointer; 32 &:hover { 33 opacity: .7; 34 } 35 } 36}
HTML
1<div class='signinPage'> 2 <div class='container'> 3 <h2 class="title">My ToDoにログイン</h2> 4 <div class="text-center m-3">or</div> 5 <div class="text-center"><%= render "devise/shared/links" %></div> 6 <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %> 7 <div class="form-group"> 8 <%= f.label :email %><br /> 9 <%= f.email_field :email, autofocus: true, class: "form-control", autocomplete: "email", placeholder: "emailを入力してください" %> 10 </div> 11 12 <div class="form-group"> 13 <%= f.label :password %><br /> 14 <%= f.password_field :password, class: "form-control", autocomplete: "off", placeholder: "パスワードを入力してください" %> 15 </div> 16 17 <div class="form-group text-center"> 18 <%= f.submit "ログインする", class: "loginBtn" %> 19 </div> 20 <% end %> 21 </div> 22</div>
回答3件
あなたの回答
tips
プレビュー