Dalam pembuatan website, terkadang kita agak susah mengatur background image, kita ingin macam-macam, pengen ini, pengen itu..Nah untuk mengatur posisi background dan sebagainya kita dapat mengaturnya menggunakan CSS.
Untuk memasukkan gambar sebagai background cukup memasukkan kode sebagai berikut
| 1 | <html> |
| 2 | <head> |
| 3 | <style> |
| 4 | body |
| 5 | { |
| 6 | background-image: url('stars.gif'); |
| 7 | background-attachment: scroll |
| 8 | } |
| 9 | </style> |
| 10 | </head> |
| 11 | <body> |
| 12 | halaman web di sini |
| 13 | </body> |
| 14 | </html> |
| view plain | print | ? |
Nilai untuk background-attachment
| Nilai | Deskripsi |
|---|---|
| scroll | background image ikut bergerak jika halaman di scroll |
| fixed | background image tidak ikut bergerak jika halaman di scroll |
Untuk pengaturan posisi background kita dapat menggunakan kode seperti contoh di bawah.
| 1 | body |
| 2 | { |
| 3 | background-image: url(stars.gif); |
| 4 | background-repeat: no-repeat; |
| 5 | background-position: top left |
| 6 | } |
| 7 | |
| 8 | body |
| 9 | { |
| 10 | background-image: url(stars.gif); |
| 11 | background-repeat: no-repeat; |
| 12 | background-position: 0% 0% |
| 13 | } |
| view plain | print | ? |
| Nilai | Deskripsi |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right | Sesuai dengan artinya... |
| x-% y-% | nilai x untuk horizontal position dan nilai y untuk vertical. Sudut kiri atas adalah 0% 0%. Sudut kanan bawah adalah 100% 100%. Semua dalam persen |
| x-pos y-pos | Nilai x untuk horizontal position dan nilai y untuk vertical. Nilai dalam pixel |
background-repeat berguna untuk mengeset bagaimana backgorund image akan di ulang/repeat.
Nilai untuk background-repeat
| Nilai | Deskripsi |
|---|---|
| repeat | background image akan diulang secara vertically and horizontally |
| repeat-x | background image akan diulang secara horizontally |
| repeat-y | background image akan diulang secara vertically |
| no-repeat | background image akan diulang sekali saja |
Postingan
0 komentar:
Posting Komentar