Property background-position digunakan untuk mengatur posisi background pada suatu elemen halaman. Nilai (Value) property ini menunjukkan pada lokasi mana suatu gambar bisa dipasang. Saya nggak akan memberikan contoh pemakaian value-nya satu persatu, tetapi akan memberi satu contoh dan selanjutnya terserah anda.... 
Kita akan coba menggunakan yahoo emotion 
sebagai background. Kalau belum punya kopi aja dari sini dan simpan gambarnya di d:\Ngeblog\24.gif
Selanjutnya seperti biasa copy atau ketik kode berikut di notepad
| <html> <head> <style type="text/css"> body { background-image:url('d:\Ngeblog\24.gif'); background-repeat:no-repeat; background-position: center; </style> </head> <body> <p>Posisi gambar background diletakkan diatas tengah-tengah elemen.</p> </body> </html> |
Simpan dan coba buka dibrowsermu, maka......
Tampilanmu akan tampak seperti ini
|
Ini Contoh background-position: center
|
Ini Contoh background-position: left top
|
yang lainnya coba sendiri yah....., ngopi dulu ahh..
Oh yaa, sampai lupa nih... (untung setelah ngopi jadi inget...)
Sebenarnya kita bisa mengatur posisi gambar kita tanpa terpaku pada posisi yang terdapat dalam tabel background-position yang lalu, yaitu dengan menggunakan nilai persentase (%) dan nilai pixels (px). Dengan cara ini kita bisa lebih bebas mengatur posisi gambar kita.
Contoh kode CSS untuk mengatur posisi gambar dengan persentase (%)
Contoh kode CSS untuk mengatur posisi gambar dengan persentase (%)
<html> <head> <style type="text/css"> body { background-image: url('d:\Ngeblog\24.gif'); background-repeat: no-repeat; background-attachment:fixed; background-position: 10% 20%; } </style> </head> <body> <p>Gambar diletakkan pada posisi 10% dari lebar elemen, dan 20% dari tingi elemen.</p> </body> </html> |
Kode diatas akan menempatkan gambar kita pada posisi sejauh 10% lebar elemen dari sebelah kiri dan sejauh 20% tinggi elemen dari sebelah atas elemen.
Dalam Browser akan nampak seperti dibawah ini:
|
Contoh kode CSS untuk mengatur posisi gambar dengan pixels (px)
<html> <head> <style type="text/css"> body { background-image: url('d:\Ngeblog\24.gif'); background-repeat: no-repeat; background-attachment:fixed; background-position: 150px 30px; } </style> </head> <body> <p>Gambar diletakkan pada posisi 150 piksel dari sebelah kiri, dan 30 piksel dari sebelah atas elemen.</p> </body> </html> |
Kode diatas akan menempatkan gambar kita pada posisi sejauh 150 piksel dari sebelah kiri dan sejauh 30 piksel dari sebelah atas elemen.
Dalam Browser akan nampak seperti dibawah ini:
|
Nah gimana..? Jadi tambah asyik thoooo...
mantap nih gan...
ReplyDelete