Menggunakan banyak background gambar dengan css

Menggunakan banyak background gambar dengan cssBerkreasi tiada batas itu yang tentunya kita harapkan bisa dilakukan dengan css. Banyak hal yang anda bisa lakukan agar tampilan sebuah halaman bisa lebih menarik dengan bantuan css. Kira bisa atur gambar, text atau objek lainya dengan cukup mudah. Termasuk mengatur gambar latar/background yang berikut ini saya sampaikan yaitu bagaimana menampilkan banyak gambar sebagai latar dari halaman web.

Tidak panjang cerita ini berikut ini cara membuat latar ganda untuk sebuah halaman atau bagian web anda.

Tambahkan kode css berikut pada bagian <head>..</head> atau modifikasi file css yang sudah.

<style type="text/css">
#multipleBGs {
   background: url(pic1.jpg),url(pic2.jpg),url(pic3.jpg);
   background-repeat: no-repeat,no-repeat,no-repeat;
   background-position: 0 0, 30px 120px, right top;
   width: 300px;
   height: 300px;
   border: 1px solid #ccc;
}
</style>

Kemudian tambahkan area/blok dalam bagian body yang akan diberi latar ganda dengan kode berikut :

<div id="multipleBGs">Isi bagian/bloknya</div>

Dengan kode-kode diatas otomatis bagian yang sudah diberi ID multipleBGs pada saat ditampilkan memiliki latar dengan 3 gambar berbeda.

Hasilnya seperti berikut :

hasil menggunakan banyak latar gambar

Silahkan copy paste kode berikut untuk mencobanya :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contoh menggunakan banyak gambar</title>
<style type="text/css">
#multipleBGs {
  background: url(pic1.jpg),url(pic2.jpg),url(pic3.jpg);
  background-repeat: no-repeat,no-repeat,no-repeat;
  background-position: 0 0, 30px 120px, right top;
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}
</style>
</head>
<body><div id="multipleBGs"></div>
</body>
</html>

Semoga bermanfaat

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Artikel Lainnya

  • Software gratis editor css
    Untuk membuat sebuah halaman web yang rumit dan menarik tentunya memerlukan kode perintah css yang lumayan banyak pula, oleh karena itu diperlukan perangkat lunak bantu yang dapat mempermudah penyusunan serta memvisualisasikan kode css yang kita buat.
  • Mengatur gambar dengan css
    CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari. CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam kode html baik itu tulisan, tabel dan gambar maupun objek lainya. Kali ini saya akan berbagi cara mengatur gambar dengan css agar dapat disajikan lebih hemat tempat dan hemat kode dan tentunya menarik.
  • Perbedaan html dengan css
    Dalam bidang desain web, HTML dan CSS dianggap sebagai sesuatu yang wajib digunakan dalam menyusun sebuah halaman web/blog. Hal itu sangatlah wajar karena perpaduan keduanya mampu menciptakan sebuah tampilan menarik, disukai mesin pencari, optimal dari segi kecepatan. Tapi apakah mereka bisa dipisahkan? seperti apa jika itu dilakukan? Apa perbedaan html dan css? Artikel berikut ini akan membantu anda membedakan HTML dengn CSS dari segi fungsi serta penulisan.
  • Membuat header tetap diatas halaman
    Banyak variasi tampilan header atau footer yang digunakan untuk menghiasi halaman web dan dapat kita temukan diinternet, mulai dari yang sekedar tulisan judul, gambar logo sampai dengan model otomatis muncul dan hilang. Pada tulisan berikut ini, saya akan berbagi trick cara membuat header dan footer yang tetap diatas dan dibawah bagian halaman.
  • Membuat tombol css dengan animasi
    membuat tombol dengan tampilan animasi dengan css

Kiriman terbaru