/ / / Tutorial Membuat Multiple Backgrounds dengan CSS3

Tutorial Membuat Multiple Backgrounds dengan CSS3

, Edit
print this page Print this page
Tutorial Membuat Multiple Backgrounds dengan CSS3-Menambahkan gambar menjadi sebuah background bukanlah hal yang baru pada CSS. Namun dapat dibilang tidak maksimal atau terbatas dikarenakan hanya dapat menambah satu gambar dalam satu blok deklarasi. Tapi sekarang dengan CSS3 kita dapat menambahkan tidak hanya satu, namun beberapa gambar untuk dijadikan sebagai background.
Jadi pada artikel ini saya akan menjelaskan membuat Multiple Backgrounds dengan CSS3
Source Codenya dapat di download di akhir tutorial ini

What we need?
Pertama, saya siapkan tiga gambar yang akan saya satukan menjadi sebuah pemandangan

Kedua, buat script HTML untuk menampilkan gambar yang sudah menjadi satu kesatuan
script index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 Multiple Background</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<h3>Multiple Background dengan CSS3</h3>
<div class="pemandangan">
</div>
<pre name="code" class="css">
.pemandangan {
text-align: center;
width: 100%;
height: 100%;
background-image: url("images/rumput.png"),
url("images/rumput.png"),
url("images/gunung.png"),
url("images/gunung.png"),
url("images/matahari.png");
background-position: 30px 100px,
280px 100px,
170px 10px,
-30px 10px,
170px 5px,
0 0;
background-repeat: no-repeat;
}
</div>
</body>
</html>

Ketiga, buat script CSS untuk memberikan style kepada gambar agar
script style.css

 .wrapper {
  width: 500px;
  height: 280px;
  margin: 50px auto;
}
.pemandangan {
  text-align: center;
  width: 100%;
  height: 100%;
  background-image: url("images/rumput.png"), 
            url("images/rumput.png"),
            url("images/gunung.png"), 
            url("images/gunung.png"), 
            url("images/matahari.png");
  background-position: 40px 100px,
                       280px 100px,
                       170px 10px,
                       -30px 10px,
                       170px 5px,
                      0 0;
  background-repeat: no-repeat;

}
Hasilnya:

ok, sekian tutorial singkat ini, semoga bisa berguna
Share on Google Plus

About kodekidi

KodeKidi.com Situs Tutorial Pemograman Berbahasa Indonesia
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

Subscribe to: Post Comments ( Atom )