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

  • Cara mengatur tampilan dengan css sesuai dengan media outputnya
    Perkembangan teknologi web sekarang ini memungkinkan kita mengatur hasil output ke banyak media dengan berbagai macam bentuk tampilan. Bisa sesuai aslinya, bahkan bisa dengan format tampilan tertentu sesuai dengan media yang kita inginkan.
  • Membuat background gradient dengan css3
    Salah satu fitur unggulan yang dihadirkan pada teknologi css3 adalah kemampuanya membuat warna latar/background gradient. Gradient adalah perubahan warna dari satu warna ke warna lainya yang dilakukan secara teratur. Gradient lebih identik pada hasil gambar yang diciptakan melalui proses penempatan kombinasi beberapa warna yang memenuhi sebuah area gambar. Biasanya untuk menghasilkan gambar gradient digunakan aplikasi pengolah gambar seperti photoshop, atau corel draw. Pada artikel ini saya akan berbagi tentang bagaimana membuat latar gradient dengan css3.
  • Mengatur format tabel dengan css
    Anda mungkin sudah tidak asing lagi dengan css, yang umumnya digunakan untuk mengatur layout halaman web. Berikut ini saya akan berbagi tentang bagaimana mengatur format tabel dengan css. Pengaturan format tabel yang akan kita lakukan adalah mengganti warna tabel dan jenis tulisan pada tiap cell tabel. SIlahkan simak berikut ini..
  • Cara membuat css dengan dreamweaver
    Cara membuat css dengan dreamweaver sangat mudah, kita bisa gunakan beberapa cara dengan bantuan fitur yang tersedia dalam dreamweaver.
  • Membuat menu dengan CSS
    Membuat menu unik dengan mengunakan HTML + CSS. CSS menurut saya sebuah teknologi yang powerfull dalam menyusun tampilan sebuah web atau blog. Ini dibuktikan sekarang css terus dikembangkan dan digunakan hampir 99% pengembang web, yang 1% nya mungkin masih dalam tahap belajar.

Kiriman terbaru