スマホ表示の時も画面いっぱいに背景画像を表示させたい

Question

コード
htlm
```<header>
    <div class="wrappar">
      <div class="top">
        <img class="logo" src="img/logo_foot.svg">
        <nav>
          <ul>
            <li>私たちの考え</li>
            <li>私たちの考え</li>
            <li>私たちの考え</li>
            <li>私たちの考え</li>
            <li>私たちの考え</li>
            <li>私たちの考え</li>
          </ul>
        </nav>
      </div>
    </div>

css
.wrappar {
  background: url(img/living_thumb.jpg) no-repeat;
  background-size: 100%;
  background-position: center;
  width: 100%;
  height: 100vh;
  z-index: -1;
  background-attachment: fixed;
}



PC表示の時は画面いっぱいに広がるのですが、スマホ表示の時は画面の中央によって上下に余白ができてしまいます。
きっとbackground-attatimentがあるからだと思うのですが理由もわかりません。
どのように直せばスマホ表示の時でも背景画像が画面いっぱいに広がるでしょうか。

Answer 1

background-size: 100%;
↓
background-size:cover;
を試してみてください