質問: ``` コード ``` 私たちの考え 私たちの考え 私たちの考え 私たちの考え 私たちの考え 私たちの考え 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表示では綺麗に見えるのですが、スマホ表示にすると画像の一部しか見えなくなってしまいます。
回答: 背景画像位置 ``` background-position: center; // 背景画像: 中央寄せ; ``` と指定しているので中央に表示します。 上につけるということであれば ``` background-position: top; // 背景画像: 上寄せ; ``` と指定します。 余白 ``` .wrappar { height: 100vh; } // .wrapparの要素に対して { 高さ: ブラウザの表示領域の高さ100%; } ``` と指定していますので、画像の大きさを考慮して高さを指定していません。 開いたブラウザのサイズによって上下の余白も変動します。 画像の大きさ=HTMLの要素の大きさとする場合、 最も単純な解決策は背景ではなくimgタグを利用する方法になります。 背景画像で縦横比を維持しつつ要素と背景画像のサイズを一致させたい場合は、 以下の記事が参考になるかと思います。