CSS Backgrounds Advanced

<!DOCTYPE html>
<html>
<head>
    <style>
        .hero-bg {
            background-image: linear-gradient(rgba(13,46,92,0.8), rgba(13,46,92,0.8)), url('https://picsum.photos/600/300');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 50px 20px;
            text-align: center;
            border-radius: 12px;
            font-family: sans-serif;
        }
    </style>
</head>
<body>
    <div class="hero-bg">
        <h2>Hero Banner Berlatar Gambar</h2>
        <p>Menggunakan background-size: cover dengan overlay gradasi warna navy.</p>
    </div>
</body>
</html>