Bila Anda tidak yakin dengan ukuran viewport, menggunakan property background-size: cover adalah satu trick untuk mempermudah. Image akan ditampilkan tidak akan dipampatkan atau ditarik terhadap viewport.
Pada viewport kecil, image yang besar akan ditampilkan sebagian saja. (gambar sebelah kiri)
Pada viewport besar maka image akan ditampilkan utuh (gambar sebelah kanan)
Ingin lihat versi live? Click di background-cover@codepen.io
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <title>Art Direction - background size: cover</title> </head> <body> <div>Art Direction Course - skillplus.web.id</div> </body>
body {
align-items: center;
background-image: url("https://images.unsplash.com/photo-1560543016-02890ba497ac?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
background-repeat: no-repeat;
background-size: cover;
display: flex;
font-size: 5vw;
font-family: "Roboto Condensed";
color:white;
text-shadow: 5px 5px 15px #333;
height: 100vh;
justify-content: center;
margin: 0;
}