Bermain-main dikit lagi dengan background
category : CSS, background, webdesign
Tags: background, tentang background
Oke, saya sudah menjelaskan sedikit tentang background. Nah, sekarang saatnya memulai pengaplikasiannya.
Pada contoh pengaplikasian background ini kemungkinan gak akan banyak-banyak contoh. Klo kamu masih kurang, silakan explore sendiri aja ya…
Kita mulai ya…
Misal, saya punya kode HTML kayak gini:
<!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>Latihan Background</title>
</head>
<body>
<h2>Contoh Pengaplikasian Background</h2>
<div id="bg1">
</div>
<div id="bg2">
</div>
</body>
</html>
Saya akan akan mencoba menambahkan background pada tag h2 dan tag div. ini adalah kode CSSnya :
h2 {
background-color: #D3D3D3;
}
#bg1{
background-image:url(images/020.png);
background-color:#EAEAEA;
background-repeat:no-repeat;
background-position:top right;
width:300px;
height:100px;
}
#bg2{
background:url(images/bg2.jpg) repeat-y;
width:613px;
height:300px;
margin-top:30px;
}
Untuk meletakkan kode CSSnya, terserah kamu ya apa mo langsung di dalam dokumen HTMLnya atau di luar dokumen HTML (beda file).
Sedikit penjelasannya:
1. Untuk tag h2 diberi background dengan warna #D3D3D3 (warna apa ya itu)..
2. Untuk tag div yang id nya bg1, gambar “020.png”akan berada di pojok kanan atas, karena memakai background-position: top right.
3. Tag div ber-id bg2, gambar “bg2.jpg” yang heightnya hanya 1px diulang secara vertikal sampai 300px. Cara ini bisa menghemat kapasitas image, dengan memotong image tersebut menjadi berukuran kecil dan mengulangnya dengan bantuan property background-repeat.
Oke, cuman satu aja ya contohnya. Hehe.. silakan explore sendiri. File latihan di atas bisa di download disini…
Mantap ..