CSS 画面いっぱいに背景画像を表示させたい

Question

cloud9上で
ちょっとしたアプリを作っています。
トップページに背景画像を追加したいのですが
画面下部に余白ができてしまい、画面いっぱいに表示されません。
調べてみていろいろ試しているのですが
うまくいかないのでご教示いただければ幸いです。

よろしくお願いいたします。

現在画面

該当CSS

.signinPage {
  margin: 30px, 0px, 0px, 0px;
  background-image: url("student-849822_1280.jpg");
  background-size: 100% 100%;
  
  .title {
    margin: 0;
    text-align: center;
    color:white;
  }
  .new_user {
    .form-group {
      max-width: 500px;
      margin: 0 auto 1rem;
      .form-control {
        background: #f6f8fa;
      }
    }
  }
  .loginBtn {
    padding: 12px;
    width: 200px;
    border-radius: 21px;
    background: #29b744;
    color: #fff;
    text-align: center;
    border: none;
    margin-top: 20px;
    opacity: 1;
    transition: opacity .5s;
    cursor: pointer;
    &:hover {
      opacity: .7;
    }
  }
}

<div class='signinPage'>
  <div class='container'>
    <h2 class="title">My ToDoにログイン</h2>
    <div class="text-center m-3">or</div>
   <div class="text-center"><%= render "devise/shared/links" %></div>
    <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
      <div class="form-group">
        <%= f.label :email %><br />
        <%= f.email_field :email, autofocus: true, class: "form-control", autocomplete: "email", placeholder: "emailを入力してください" %>
      </div>

      <div class="form-group">
        <%= f.label :password %><br />
        <%= f.password_field :password, class: "form-control", autocomplete: "off", placeholder: "パスワードを入力してください"  %>
      </div>

      <div class="form-group text-center">
        <%= f.submit "ログインする", class: "loginBtn" %>
      </div>
    <% end %>
  </div>
</div>

Comments

[maisumakun]

HTMLのほうはどのような感じでしょうか。

[rinkoro]

HTML追加しました。よろしくお願いいたします。

Answer 1

.signinPageの寸法自体が、ブラウザを埋め尽くせるほど大きくないのではないかと思います。min-height: 100%;としてブラウザ高さ分を確保してみたら、どうなりますでしょうか。

---

本題ではありませんが、background-size: 100% 100%;とすると縦横比も無視して全部表示となりますので、横長な画像を縦長なブラウザで表示する（あるいはその逆）の場合には、縦横比が大きく崩れることが予想されます。background-size: cover;とすれば、「縦横比はそのまま、表示領域を埋め尽くして最小の寸法にする」という処理になりますので、状況によっては便利かもしれません。

Comments

[rinkoro]

min-height: 100%にしても変わらなかったです。ご丁寧にご説明有難うございます。そのように設定しておきます＾＾

[kei344]

min-height: 100vh;のほうが良いのでは？

[yoshinavi]

最初に、htmlとbody要素に「height: 100%;」設定されてみては、どうでしょうか？

Answer 2

下記のようにCSSを記述すればできます。
(通常はbodyに背景画像をCSSで指定)

body {
    background: url(画像パス) center top no-repeat;
    background-size: cover;
}

Comments

[rinkoro]

有難うございました＾＾

Answer 3

.signinPageにバックグラウンドイメージを設定していますが
単純にbodyに設定する必要があるのでは？