(Sample)

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>
            body { 
                margin: 0; /* body要素の余白を0に設定します。 */
                width: 100vw; /* body要素の幅をビューポートの100%に設定します。 */
                height: 100vh; /* body要素の高さをビューポートの100%に設定します。 */
                background-image: url("https://picsum.photos/1200"); /* url()の中に画像のパスを指定してbody要素の背景画像を指定します。 */
                background-repeat: no-repeat; /* 背景画像を繰り返さないように設定します。 */
                background-position: center center; /* 背景画像の位置を中央に設定します。 */
                background-size: cover; /* 背景画像をビューポートに合わせて覆い尽くすように設定します。 */
            }
        </style>
    </head>
    <body> 
    </body>
</html>
Webアプリケーション制作のための小ネタ集　目次に戻る

背景画像を1枚の写真で覆いたい　最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる