Masih membahas tentang CSS (Cascading Style Sheets) background yang memungkinkan Anda dapat mengatur posisi background, warna elemen background, pengulangan background dan yang lainya. Saya akan membahas CSS yang digunakan dalam pengaturan background secara singkat dan jelas, semoga bisa sedikit membantu Anda dalam mengontrol background dari elemen.Ada beberapa macam property background yang memungkinkan Anda dapat mengontrol background dari elemen.
1. background-color
Memungkinkan Anda memberikan warna pada background
| Property | Keterangan |
| transparent | Mengosongkan warna background atau membuat elemen menjadi transparan dengan elemen dibawahnya. |
| #FF3366 | Memberi warna pada background, code #FF3366 adalah code warna hex dari warna merah, Anda bisa mengubah dengan code warna rgb atau nama warna misalnya: red (merah), black (hitam), dan sebagainya. |
Contoh :
#kotak
{
background-color:#FF3366;
}
Menjadi
ELEMEN KOTAK
2. background-image
Memungkinkan Anda menambahkan gambar pada background
| Property | Keterangan |
| url(URL_GAMBAR) | memberi gambar pada background elemen, code URL_GAMBAR bisa Anda ganti dengan url server gambar Anda. |
| none | Mengosongkan background gambar pada elemen. |
Contoh:
#elemen-gambar
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg)
}
Menjadi :
ELEMEN GAMBAR
3. background-attachment
Memungkinkan Anda mengatur background gambar dengan pergeseran scroll bar
| Property | Keterangan |
| scroll | Memungkinkan elemen background mengikuti penggeseran scroll bar. |
| fixed | Memungkinkan elemen background tidak mengikuti pergeseran dari scroll bar. |
Contoh
#elemen-attachment
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-attachment:fixed
}
Menjadi
BACKGROUND FIXED
GESER SCROLL
BACKGROUND FIXES
GESER SCROLL
4. background-repeat
Memungkinkan Anda mengatur pengulangan background gambar
| Property | Keterangan |
| repeat | Membuat elemen gambar background menjadi berulang-ulang |
| no-repeat | tidak ada pengulangan |
| repeat-y | pengulangan vertikal |
| repeat-x | pengulangan horizontal |
Contoh :
#elemen-ulang
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-repeat:repeat-y;
}
Menjadi :
PENGULANGAN BACKGROUND SECARA VERTIKAL
PENGULANGAN BACKGROUND SECARA VERTIKAL
PENGULANGAN BACKGROUND SECARA VERTIKAL
PENGULANGAN BACKGROUND SECARA VERTIKAL
PENGULANGAN BACKGROUND SECARA VERTIKAL
PENGULANGAN BACKGROUND SECARA VERTIKAL
PENGULANGAN BACKGROUND SECARA VERTIKAL
5. background-position
Memungkinkan Anda mengatur posisi background gambar Anda.
| Property | Keterangan |
| top left | Penempatan posisi background gambar, top left adalah posisi background berada kiri atas, Anda bisa mengganti posisi menjadi : top center top right center left center center center right bottom left bottom center bottom right |
| x% y% | mengatur posisi background secara sumbu horizontal dan vertikal, misalnya 5% 30% adalah penempatan gambar horisontal 5% dan vertikal 30%. Atau bisa menggunakan pixel, 20px 30px artinya posisi horizontal berada pada 2o pixel dan vertikal 30 pixel. |
Contoh:
#elemen-posisi
{
background-image:url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg);
background-position:top left;
background-repeat:no-repeat;
height:200px
}
Menjadi :
ELEMEN BACKGROUND
PENGULANGAN
ATAS KIRI
Dari semua perincian diatas Anda dapat menggunakan satu perincian property background saja. misalnya :
#kotak
{
background:#FFFFFF url(http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg) no-repeat top left fixed
}
Nah sedikit tutorial dari Saya semoga dapat membantu Anda. Sekian semoga bermanfaat.
