Properti latar belakang CSS digunakan untuk menambahkan efek latar belakang pada elemen.
background-color : Warna latar belakang elemen.background-image : Gambar latar belakang (url('gambar.jpg')).background-repeat : Pengulangan gambar (no-repeat, repeat-x, repeat-y).background-position : Posisi awal gambar (center, top right).background-size : Ukuran gambar (cover agar memenuhi seluruh layar, contain agar pas di dalam wadah).<!DOCTYPE html>
<html>
<head>
<style>
.hero-box {
background-image: url('https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=600');
background-size: cover;
background-position: center;
color: white;
padding: 50px 20px;
border-radius: 12px;
text-align: center;
box-shadow: inset 0 0 0 2000px rgba(13, 46, 92, 0.7);
}
</style>
</head>
<body>
<div class="hero-box">
<h2 style="margin: 0;">Latar Belakang Gambar Responsif</h2>
<p style="margin-bottom: 0;">Menggunakan background-size: cover dan overlay transparan.</p>
</div>
</body>
</html>Nilai cover memastikan gambar latar belakang selalu menutupi seluruh elemen tanpa distorsi.
Nilai background-size apa yang membuat gambar meregang dan menutupi seluruh area elemen tanpa mengubah aspek rasio gambar?