Cara Menampilkan Banyak Background Image Dengan CSS 3

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.

29 September 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat