Setelah membahas bagaimana cara membuat background image alias latar belakang gambar di HTML CSS, kali ini kita sedikit melangkah ke depan dengan membuat 2 gambar sekaligus untuk dijadikan gambar latar belakang dengan CSS. Siapkan file HTML dan CSS yang akan digunakan dan lakukan langkah-langkah dibawah ini.

Biasanya, ketika membuat gambar latar belakang itu hanya satu gambar saja seperti iniĀ .namaClass {background: url(contoh-gambar.png) no-repeat;}untuk no-repeat atau tanpa pengulangan gambar.

Ketika membuat 2 gambar latar / multiple background images sekaligus cukup tambahkan seperti ini:

.namaClass {
    background: url(gambar1.png) right bottom no-repeat, url(gambar2.png) left top repeat;
}

Dengan kode ini, artinya ada 2 gambar yang akan dijadikan background. Ini adalah contoh jika kalian membuat dalam satu baris sekaligus, versi lain susunannya sama aja seperti ini:

.namaClass{
    background-image: url(gambar1.png), url(gambar2.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}

Perlu nilai untuk masing-masing gambar, maka dibuat 2x nilainya.

Jangan lupa untuk mengganti URL gambar sesuai direktori yang ada, jika tidak yakin bisa lihat tutorial cara memanggil berkas di HTML CSS dan tutorial cara membuat background media.

left right bottom top itu adalah posisi dimana akan meletakkan background image, karena ketika tidak diatur akan menimpa satu sama lainnya. Sesuaikan sesuai kebutuhan, misalnya background 1 berada di kiri bawah dan background 2 berada di kanan atas seperti yang dituliskan diatas.

Dengan kode diatas, setiap class / id / div / bidang lain di HTML dapat menggunakan multiple gambar sekaligus.

Masih bingung ? Lihat : Video tutorial cara membuat multiple background images dalam 1 kotak HTML CSS.

Selamat mencoba !

Kunjungi kategori HTML CSS untuk mempelajari lebih lanjut tentang HTML CSS.


Jangan Lupa Share !!!

45
9 shares, 45 points

Apa Reaksimu ?

Bingung Bingung
2
Bingung
Kesal Kesal
13
Kesal
OMG OMG
2
OMG
Takut Takut
1
Takut
Keren Keren
9
Keren
Sedih Sedih
4
Sedih
Posciety Tech

Pro

Official Channel Posciety.Com yang menyuguhkan informasi dan updates seputar dunia teknologi.

0 Komentar

Pilih Format
Artikel
Default, Membuat Artikel/Cerita
List
Listicle, Misalnya: 3 Hal yang Wajib Dilakukan Saat...
Kuis Kepribadian
Membuat kuis Tentang Kepribadian
Poll
Vote untuk Membuat Keputusan atau Mencari Saran
Meme
Membuat Meme dari Gambar Normal yang Kamu Miliki