背景画像の位置が画面の真ん中に来てしまうのを上端に位置させたい

Question

コード
```<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%　50%;
background-position: center;
width: 100%;
height: 100vh;
z-index: -1;
background-attachment: fixed;
}

縦横比を維持し用としてbackground-sizeを100% 50%にしたのですが、なぜか画面上下に余白ができてしまいます。
marginやtopを変えても変わりませんでした。
どのようにすれば上下の余白をつけずに上端に背景画像を位置付けられるでしょうか。

ちなみにbackground-sizeをcoverにすると画面全体を覆ってPC表示では綺麗に見えるのですが、スマホ表示にすると画像の一部しか見えなくなってしまいます。

Answer 1

背景画像位置

background-position: center;
// 背景画像: 中央寄せ;

と指定しているので中央に表示します。
上につけるということであれば

background-position: top;
// 背景画像： 上寄せ;

と指定します。

余白

.wrappar {
  height: 100vh;
}
// .wrapparの要素に対して {
  高さ: ブラウザの表示領域の高さ100%;
}

と指定していますので、画像の大きさを考慮して高さを指定していません。
開いたブラウザのサイズによって上下の余白も変動します。

画像の大きさ＝HTMLの要素の大きさとする場合、
最も単純な解決策は背景ではなくimgタグを利用する方法になります。

背景画像で縦横比を維持しつつ要素と背景画像のサイズを一致させたい場合は、
以下の記事が参考になるかと思います。

https://taneppa.net/responsive_background_image/

Comments

[退会済みユーザー]

参考サイトまで乗せてくださりありがとうございます。
おかげでよく理解できました。

Answer 2

とりあえず、
background-position: top;
とすれば画像の上部は表示されます。

どのようにすれば上下の余白をつけずに上端に背景画像を位置付けられるでしょうか。

ちなみにbackground-sizeをcoverにすると画面全体を覆ってPC表示では綺麗に見えるのですが、スマホ表示にすると画像の一部しか見えなくなってしまいます。

no-repeatで、横長のPC画面でちょうどよく表示される場合、縦長のスマホでは、画面全体を覆って画像の一部を表示するか、画像の上下に余白ができるか、の二択だと思いますが、結局どうしたいのでしょうか。