Menyisipkan 2 Background Gambar dengan Properties Multiple Background CSS3

Hallo teman-teman bertemu lagi pada tutorial dumet school, Pada tutorial kali ini saya akan membahas tentang bagaimana cara menyisipkan 2 background sekaligus dengan menggunakan properties multiple background pada CSS3.
Jadi properties ini berfungsi untuk combine 2 background dengan beda gambar.

Oke teman-teman daripada bingung, mungkin langsung saja kita praktekan, silakan teman-teman siapkan 2 buah gambar yang akan dijadikan background, dan ketikan script berikut:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

</head>

<body>
<div></div>
</body>
</html>

Saya membuat sebuah element div, lalu teman-teman bisa save.

Sekarang kita akan beralih ke CSS-nya, silahkan tambahkan script CSS berikut :

<style>
div{width: 100%;
    height: 390px;
    background-image: url(bg_body.jpg), url(image_2.jpg);
    background-repeat: repeat-x;
    background-position: left top, left bottom;
}
</style>

Penjelasan dari script CSS di atas adalah:

1. menentukan lebar area divnya, contoh di atas saya memberikan nilai 100%.
2. saya menentukan heightnya sebesar 390px.
3. saya menset 2 background dengan pemisahnya berupa tanda koma(,).
4. menentukan pengulangan dari backgroundnya
5. background position untuk menentukan letak dari background pertama dan kedua, dipisahkan dengan tanda koma(,)

Jika teman teman save maka hasilnya akan seperti berikut:

Oke teman-teman gimana? mudah bukan ?

Mungkin cukup sekian dulu tutorial kali ini, semoga bermanfaat.

Terimakasih.