背景画像を1枚の写真で覆いたい
山崎講師cssのbackground関連のプロパティを設定することで背景一面にマージンなく画像を表示することができます。
background-size: cover;が「覆う」という意味になります。
画像をコンテナーいっぱいにできるだけ大きく拡大縮小し、必要に応じて画像を引き伸ばします。画像の比率が要素と異なる場合は、何もない空間が残らないように、上下または左右が切り取られます。
https://developer.mozilla.org/ja/docs/Web/CSS/background-size
<!DOCTYPE html>
<html>
<head>
<title>background-size-cover.html</title>
<meta charset="UTF-8">
<style>
</head>
body {
margin: 0; <!-- body要素の余白を0に設定します。 -->
width: 100vw; <!-- body要素の幅をビューポートの100%に設定します。 -->
height: 100vh; <!-- body要素の高さをビューポートの100%に設定します。 -->
background-image: url("https://picsum.photos/1200"); <!-- body要素の背景画像を指定します。 -->
background-repeat: no-repeat; <!-- 背景画像を繰り返さないように設定します。 -->
background-position: center center; <!-- 背景画像の位置を中央に設定します。 -->
background-size: cover; <!-- 背景画像をビューポートに合わせて覆い尽くすように設定します。 -->
}
</style>
<body>
</body>
</html>
