Penggunaan background-position

Background-position memang keren apalagi di tambah dengan efek transition css3 makin cihui aja tampilannya, kalau entar pas liat demo trus Efek animasi roketnya gak jalan atau pergerakan animasinya kasar banget berarti browser anda minta di update.

DEMO

Coba cek demo dan arahkan kursor sesuai petunjuk dan lihat efek animasinya. roketnya serasa terbang itu masih belum seberapa anda bisa kembangkan lagi nantinya. nilai default atau bawaan background-position adalah 0% 0% bisa juga menggunakan keyword seperti di bawah ini.

1. center
2. left top
3. left center
4. left bottom
5. right top
6. right center
7. right bottom
8. center top
9. center center
10. center bottom

Contoh penggunaan keywordnya seperti ini.

background-position: center;

Jika sudah dipilih center maka backgroundnya akan berada di tengah. begitu pula dengan yang lain background nya akan bertempat sesuai keyword nya, Hasil dari contoh 1 seperti di bawah ini.

Contoh penggunaan value / nilai dengan angka

background-position: 10% 50%;

10% 50% bisa di andaikan seperti ini x% y% artinya 10% dari arah horizontal dan 50% dari arah vertikal, Contoh ilustrasinya seperti di bawah ini.

Selain % anda juga bisa menggunakan Css unit di bawah ini.

1. px : pixel
2. pc : pica
3. em : em
4. ex : ex
5. pt : point
6. % : persen
7. in : inchi
8. mm : meilimeter
9. cm : centimeter