Friday, November 4, 2011

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

2 komentar postingan ini

mantap bangeet aah ilmunya master css yang satu ini :D

Ilmunya tinggi nih, kapan ya bisa kayak gini

Jika ingin memasukan gambar gunakan tag
[img]url gambar[/img]
Jika Video
[youtube]URL Video[/youtube]
Jika kata - kata mutiara gunakan
[blockquote]Kata-kata Anda[/blockquote]
Emoticon
EmoticonEmoticon