Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 20 : Cara Mengatur Border Image di CSS. Selanjutnya, kita akan mempelajari cara mengatur multi background di CSS.
Properti CSS multi background digunakan untuk menambahkan satu atau lebih gambar sekaligus tanpa kode HTML, Kita dapat menambahkan gambar sesuai kebutuhan.
Contoh sintaks gambar multi background adalah sebagai berikut :
#multibackground {
background-image: url(/css/images/logo.png), url(/css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
Nilai yang paling umum digunakan untuk multi background adalah sebagai berikut :
| No. | Nilai & Deskripsi |
| 1 | background Digunakan untuk mengatur semua properti gambar background dalam satu bagian |
| 2 | background-clip Digunakan untuk mendeklarasikan area gambar background |
| 3 | background-image Digunakan untuk menentukan gambar background |
| 4 | background-origin Digunakan untuk menentukan posisi gambar background |
| 5 | background-size Digunakan untuk menentukan ukuran gambar background |
Untuk lebih jelasnya, Anda bisa melihat penggunaan multi background melalui contoh berikut ini :
<html>
<head>
<style>
#multibackground {
background-image: url(https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png), url(https://image.freepik.com/free-photo/abstract-techno-background_1048-8572.jpg);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
</style>
</head>
<body>
<div id = "multibackground">
<h1>mbahwp.com </h1>
<p>
Mbah WP adalah website yang membahas berbagai materi seperti bisnis online
,server, web programing, blogging dan masalah terkait teknologi
Anda bisa belajar apapun terkait teknologi lewat website ini.
</p>
</div>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Semoga tutorial ini membantu Anda untuk mempelajari cara mengatur multi background di CSS untuk mempercantik tampilan dokumen HTML.
0 Komentar