hisman.org » background http://hisman.org webdesign source and tutorial Thu, 11 Feb 2010 14:35:35 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Bermain-main dikit lagi dengan background http://hisman.org/bermain-main-dikit-lagi-dengan-background.html http://hisman.org/bermain-main-dikit-lagi-dengan-background.html#comments Thu, 11 Sep 2008 14:33:36 +0000 hisman http://hisman.org/?p=52 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…

Selamat mencoba…

]]> http://hisman.org/bermain-main-dikit-lagi-dengan-background.html/feed 2 Sedikit Penjelasan Tentang Background http://hisman.org/sedikit-penjelasan-tentang-background.html http://hisman.org/sedikit-penjelasan-tentang-background.html#comments Tue, 09 Sep 2008 04:23:30 +0000 hisman http://hisman.org/?p=48 Yap,,kali ini saya akan bahas mengenai bagaimana menambahkan background dengan CSS. Namun, sebelumnya ini beberapa hal tentang background yang perlu kamu tau, dan mungkin kamu sudah tau hal-hal ini:

1. Background dapat berupa warna ataupun gambar, atau bahkan bisa terdiri dari dua unsur tersebut.

2. Kamu bisa ngasih background di elemen HTML manapun, kamu tinggal ubah-ubah selectornya aja.

Ada 6 property di CSS,yang bisa digunakan untuk menambahkan background pada dokumen HTML kita, yaitu background-color, background-image, background-attachment, background-position, background-repeat, dan background. Saya jelasin satu-satu ya

1. background-color

Sesuai namanya, guna dari property ini adalah memberi warna pada background. Value dari property ini ya warna-warna yang ingin diberikan pada background.

Contohnya:


body{
     background-color:#000000;
}

Kode CSS di atas akan membuat tag body memiliki background berwarna hitam (#000000 = hitam).

2. background-image

Kalo property yang ini berguna untuk membuat image/gambar menjadi background. Valuenya seperti ini

url(letak gambar).

Contohnya, saya ingin membuat gambar “bg.png” menjadi background dari tag body yang terletak di folder images (folder images dan file HTMLnya ada dalam satu folder), maka CSSnya jadi seperti ini:


body{
     background-image: url(images/bg.png);
}


3. background-attachment

Kamu pernah liat situs yang kalo situsnya discroll backgroundnya gak ikutan ke scroll, nah itu contoh salah satu pemakaian property background-attachment dengan value fixed. Value dari background-attachment yang laen namanya scroll, klo yang ini kebalikannya dari fixed.

Contohnya, misal pada contoh background-image, saya pengen gambar bg.png tidak berubah/tetap di posisinya ketika di scroll, maka saya tinggal menambahkan property background-attachment di kode CSSnya:


body{
     background-image: url(images/bg.png);
     background-attachment:fixed;
}

4. background-position

Posisi dari background dapat kamu atur dengan property ini. Valuenya bisa top, center, bottom, right, atau bisa juga kamu set sendiri menjadi berapa pixel,em, atau persen.

Contoh :


body{
      background-image: url(images/bg.png);
      background-attachment:fixed;
      background-position: top;
}

5. background-repeat

Property ini gunanya untuk mengulang gambar pada background jika width atau height dari gambar tersebut lebih kecil dari halaman HTML yang dibuat. Untuk valuenya ada repeat, no-repeat, repeat-x, repeat-y.

Klo valuenya repeat, gambarnya akan diulang terus sampai halamannya penuh, klo no-repeat gambar tidak akan diulang, repeat-x akan membuat gambar diulang secara horizontal aja sedangkan value repeat-y akan mengulang gambar secara vertikal. Secara default klo kamu gak ngeset value dari property ini maka valuenya otomatis adalah repeat.

Contohnya:


body{
      background-image: url(images/bg.png);
      background-attachment:fixed;
      background-position: top;
      background-repeat: no-repeat;
}

6. background

Nah, klo property background berguna untuk mempersingkat penulisan property-property yang ada di atas. Misalnya pada contoh property background-repeat, kamu bisa menuliskannya hanya dengan begini:


body{
    background: url(images/bg.png) fixed top no-repeat;
}

Ingat setiap value dipisahkan dengan spasi.

]]> http://hisman.org/sedikit-penjelasan-tentang-background.html/feed 8