body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    /* 1. Set the image */
    background-image: url('background.webp');

    /* 2. Ensure the body is at least as tall as the screen */
    min-height: 100vh; /* 100% of the viewport height */

    /* 3. Scale the image to cover the entire screen */
    /* This scales the image (maintaining aspect ratio) so it
       covers the whole area. Some parts may be cropped. */
    background-size: cover;

    /* 4. Center the image */
    background-position: center;

    /* 5. Do not repeat/tile the image */
    background-repeat: no-repeat;
}