2 Gambar Latar Belakang Dalam 1 Bidang HTML

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:

ads by posciety

.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.