CSS - background

properti CSS untuk background mendefinisikan efek background pada suatu element. properti CSS untuk background yaitu:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
background color digunakan untuk memberi background warna pada suatu element, misalnya:
body {background-color:#b0c4de;}
yang berarti seluruh halaman web berwarna #b0c4de.
contoh lain misalnya:
h1 {background-color:#6495ed;} element h1 diberi background warna #6495ed.
p {background-color:#e0ffff;} element p diberi warna #e0ffff.
div {background-color:#b0c4de;} element div diberi warna #b0c4de.
selain itu, background color dapat dispesifikasikan berdasarkan:
• nama – nama warna (dlm english), misal “red”
• RGB – nilai RGB, seperti “rgb(255,0,0)”
• Hex – nilai heksa, seperti “#ff0000″

Background Image digunakan untuk menggunakan gambar sebagai background untuk suatu element atau tampilan. secara default gambar yang dimasukkan akan diulang secara vertikal dan horizontal bila tidak ditambahkan property lainnya, contoh penulisannya:
body
{
background-image:url(‘gradient2.png’);
}
bila ingin background berulang secara vertikal saja, horizontal saja, atau tidak berulang bisa digunakan property background repeat, contoh penulisan:
body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
}
nilai properti background repeat bisa diubah menjadi repeat-x bila gambar ingin diulang secara horizontal atau repeat-y bila gambar ingin diulang secara vertikal.
gambar background juga posisinya bisa diatur dengan property background position, contohnya:
body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
background-position:right top;
}
pada contoh diatas berarti posisi gambar berada di sebelah kanan atas.
penulisan kode CSS seperti diatas tergolong boros atau “ribet”, supaya tidak ribet dalam CSS ada juga yg dikenal dengan shorthand property yaitu penulisan kode CSS cukup dengan menggunakan urutan nilai property saja sehingga tidak perlu ditulis nama property cukup nilainya saja. metode ini memiliki urutan penulisan, dalam CSS background urutan tersebut yaitu:
background color – background image – background repeat – background attachment – background posistion
contoh penulisannya yaitu:

body {
background:#ffffff url(‘img_tree.png’) no-repeat right top;
}
bila ada property yang tidak digunakan maka dibiarkan kosong saja dan diisi dengan nilai property selanjutnya sesuai urutan.