CSS untuk Background

Properti CSS Background digunakan untuk menentukan efek latar belakang suatu elemen. Biasanya adalah :
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
Background-Color
Background color adalah properti untuk menentukan warna latar suatu elemen. Background color sebuah halaman didefinisikan oleh body selector seperti di bawah ini:
body {background-color:#b0c4de}
Pendefinisian background color lebih spesifik bisa dengan perintah sebagai berikut:
  • name - a color name, like "red"
  • RGB - an RGB value, like "rgb(255,0,0)"
  • Hex - a hex value, like "#ff0000"
Pada contoh di bawah ini, h1, p, dan elemen span memiliki warna latar belakang yang berbeda:
h1 {background-color:#6495ed}
p {background-color:#e0ffff}
div {background-color:#b0c4de}
Background-Image
Background image adalah properti untuk menetapkan sebuah gambar sebagai latar sebuah elemen. Secara default, gambar diulang sehingga meliputi seluruh elemen. Gambar latar belakang untuk halaman dapat diatur seperti ini:
body {background-image:url('paper.gif')}
Di bawah ini adalah kombinasi yang buruk antara teks dan gambar latar. Teks nyaris tidak terbaca dengan baik:
body {background-image:url('bgdesert.jpg')}
Background-Image : Pengulangan secara horizontal atau vertikal
Standar property background image adalah pengulangan gambar baik secara horizontal maupun vertikal. Beberapa gambar hanya diulang horizontal atau hanya vertikal, karena jika tidak background akan terlihat aneh. Jika tidak diulang maka kodenya akan terlihat seperti dibawah ini:
body
{
background-image:url('gradient2.png');
}
Jika gambarnya diulang secara horizontal (repeat-x), background akan terlihat lebih baik. Kodenya akan terlihat sebagai berikut:
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
Jika gambar latar ingin hanya ditampilkan sekali saja (image sudah besar), maka pengulangan tidak perlu dilakukan. Kodenya akan terlihat sebagai berikut:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
Background-Image : Pengaturan posisi
Pada contoh-contoh di atas, teks dan gambar berada dalam tempat yang sama. Jika kita ingin meletakkan gambar pada posisi yang berbeda kita dapat mengaturnya sehiga kodenya akan terlihat sebagai berikut:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:top right;
}
Background-Image : Shorthand Property
Pada contoh di atas, beberapa property dibuat secara terpisah-pisah. Sebenarnya property itu dapat dibuat ringkas dalam satu baris yang dinamakan shorthand property. Shorthand property untuk background biasa diringkas dengan 'background'. Contoh penggunaannya sebagai berikut:
body {background:#ffffff url('img_tree.png') no-repeat top right}
Ketika menggunakan shorhand property, urutan nilai/value semestinya adalah sebagai berikut: background-color; background-image; background-repeat; background-attachment; background-position.
Tidak masalah jika nilai/value dari property itu kosong, sepanjang ditulis dengan berurutan seperti urutan di atas.

7:00 PM | Labels: |

This entry was posted on 7:00 PM and is filed under Belajar CSS . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

 

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)