Halo sobat Artikel Multimedia, postingan kali ini kita akan membahas bagaimana cara membuat background image dengan css. Dengan menggunakan properti background image maka sobat bisa menambahkan gambar pada latar belakang halaman html ataupun latar belakang untuk elemen tertentu. Berikut contoh kode css nya:
1. Background image sederhana
background-image: url("gambar.jpg");
}
Jika hanya menggunakan properti
background image saja, hasilnya akan terlihat kurang rapi seperti berikut.
Namun jika ditambahkan dengan
properti pendukung lainnya sesuai kebutuhan, maka akan terlihat lebih rapi dan
menarik.
height: 300px;
background:
linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
url("gambar.jpg");
background-size: cover;
background-position: center;
}
Hasilnya seperti berikut:
2. Background image pada elemen
tertentu
Selain digunakan untuk membuat latar
belakang halaman html, properti ini juga dapat digunakan untuk membuat latar
belakang pada elemen tertentu. Contohnya seperti pada elemen div dengan class
header berikut:
<html>
<title>Background Image</title>
<style>
.header {
height: 50vh;
background-image: url("gambar.jpg");
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
}
height: 300px;
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url("gambar.jpg");
background-size: cover;
background-position: center;
color: white;
}
</style>
</head>
<div class="header">
<h1>Selamat Datang!</h1>
</div>
</body>
Maka hasilnya akan terlihat seperti
ini:
Sekian pembahasan tentang cara membuat background image dengan css, jika sobat tertarik dengan artikel seputar multimedia silakan kunjungi postingan kami lainnya di blog ini. Terima kasih …
0 Komentar
Terima kasih telah mengunjungi website ini semoga bermanfaat untuk anda