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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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 **

Komentar

Halaman Lainya

  • 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.
  • Cara membuat css dengan dreamweaver
    Cara membuat css dengan dreamweaver sangat mudah, kita bisa gunakan beberapa cara dengan bantuan fitur yang tersedia dalam dreamweaver.
  • 147 Nama warna dalam css
    Sebelumnya saya menulis tentang 6 cara penulisan warna dalam css. Pada tulisan ini saya berbagi tentang 147 nama warna yang bisa anda gunakan dalam css. Nama-nama warna ini sering dikatakan sebagai keyword yang merujuk pada warna tertentu yang hampir didukung oleh semua browser yang ada sekarang.
  • Referensi warna untuk HTML dan CSS
    Warna yang terlihat disebuah website/blog sangatlah bervariasi dan memiliki daya tarik tersendiri terhadap pengunjung, pingin tau lengkap referensi warna untuk HTML maupun CSS, silahkan baca panduan berikut.
  • Cara Membagi halaman hasil cetak printer dengan css
    Jika kita mencetak sebuah halaman web yang isinya panjang, biasanya hasil cetaknya bersambung menjadi beberapa halaman yang tidak pasti bagian-bagianya. Bisa saja satu halaman terdiri dari beberapa bagian bahasan atau format yang berbeda sehingga menyulit

Kiriman terbaru