Menyisipkan 2 Background Gambar dengan Properties Multiple Background CSS3
Hallo teman-teman bertemu lagi di panduan Source Code Aplikasi, Di panduan kali ini saya akan membahas mengenai bagaimana cara menyisipkan 2 background sekaligus dengan menggunakan properties multiple background di CSS3.
Jadi properties ini berfungsi bagi combine 2 background dengan beda gambar.
Oke teman-teman daripada bingung, mungkin seketika 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 membangun sebuah element div, lalu teman-teman dapat save.
Kini 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 yaitu:
- menentukan lebar area divnya, contoh di atas saya memberikan nilai 100%.
- saya menentukan heightnya sebesar 390px.
- saya menset 2 background dengan pemisahnya berupa tanda koma(,).
- menentukan pengulangan dari backgroundnya
- background position bagi menentukan letak dari background pertama-tama dan kedua, dipisahkan dengan tanda koma(,)
Jikalau teman teman save karenanya hasilnya akan seperti berikut:
Oke teman-teman gimana? gampang bukan ?
Mungkin lumayan demikian dulu panduan kali ini, semoga bermanfaat.
Terimakasih.
Sumber https://kursuswebsite.org
