Cara Menampilkan Banyak Background Image Dengan CSS 3

29/09/2015    Faizal Rafik    18274    Website

Hallo teman-teman DUMET School, pada tutorial kali ini saya akan mengajarkan bagaimana caranya menampilkan banyak Background Image menggunakan CSS 3. Sebenarnya caranya sangat mudah sekali kalian cukup memisahkan gambar satu dengan gambar lainnya dengan tanda koma (,) dan kalian juga tentukan masing-masing gambar tersebut mau di tempatkan di mana, dengan menentukan property CSS yaitu Background Position dan jangan lupa juga untuk memisahkan nilai background position nya dengan tanda koma (,). Oke kita akan langsung coba saja ya teman-teman.

Pertama kalian bisa buat satu file HTML dengan nama index.html, kemudian ketikkan baris kode yang ada di bawah ini.

Selanjutnya untuk CSS nya kalian bisa ketikkan baris program di bawah ini.

Bisa kalian perhatikan pada baris program CSS di atas, pada property background images terdapat 2 gambar yang di pisahkan dengan tanda koma (,), di mana urutan dari gambar yang di tampilkan di browser adalah gambar yang pertama saya panggil itu posisinya berada di atas, sedangkan gambar yang kedua adalah gambar yang berada di bawah nya, jadi ketika kalian tambahkan gambar ke tiga dan kalian menambahkan gambar ke tiganya setelah gambar kedua maka gambar ketiga akan berada di paling bawah dan begitu seterusnya jika kalian menambahkan gambar lainnya. Begitupun dengan nilai property Background position nya, di mana pada CSS di atas terdapat 2 nilai yang di pisahkan dengan tanda koma (,) di mana nilai yang pertama untuk mengatur gambar yang di panggil pertama, kemudian nilai yang kedua untuk mengatur gambar yang di panggil kedua.

Maka nanti hasilnya seperti berikut.

Nah itulah cara menampilkan banyak background images dengan CSS 3. Sekian dulu tutorial dari saya sampai ketemu di tutorial berikutnya ya teman-teman. Terima kasih.

No data.