Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

06 css background

343 views

Published on

CSS Background

Published in: Internet
  • Be the first to comment

  • Be the first to like this

06 css background

  1. 1. CSS BACKGROUND AMIROH, S.KOM Save a lot of works with…
  2. 2. CSS BACKGROUND  Digunakan untuk menentukan tampilan dan memberi efek tertentu pada sebuah tag/elemen HTML, baik berupa gambar maupun warna  Properti yang biasa digunakan adalah:
  3. 3. BACKGROUND-COLOR  Digunakan untuk menentukan warna background sebuah elemen HTML Untuk menentukan warna latar belakang halaman web
  4. 4. Background Image  Digunakan untuk menentukan background elemen HTML berupa gambar  Contoh penulisan:  Secara default, gambar yang ditampilkan akan diulang memenuhi elemen HTML, baik ke arah horizontal maupun vertikal
  5. 5. BACKGROUND-REPEAT  Digunakan untuk menentukan arah pengulangan tampilan gambar  Nilai property:
  6. 6.  Apabila diinginkan gambar diulang ke arah horizontal/vertikal saja, maka digunakan value repeat-x atau repeat-y  Apabila tidak diinginkan pengulangan, maka digunakan value no-repeat
  7. 7. BACKGROUND-POSITION  Digunakan untuk menentukan letak posisi gambar.  Value:
  8. 8. CONTOH
  9. 9. Posisi Gambar di tengah halaman web Posisi Gambar di kanan bawah halaman web Posisi Gambar di kanan bawah halaman web
  10. 10. BACKGROUND-ATTACHMENT  Digunakan untuk menentukan tampilan background tetap (fixed) atau bergerak (scroll) ketika layar browser digulung
  11. 11. Contoh Background tidak menggulung ketika Scroll browser Background menggulung ketika Scroll browser
  12. 12. Background - Shorthand property  Property Background di atas dapat dituliskan menjadi satu property yang disebut dengan shorthand property.  Urutan penggunaan Shorthand property:  background-color  background-image  background-repeat  background-attachment  background-position
  13. 13. LATIHAN 1 Ketentuan: Judul : Bergaris bawah Alignment : Left Background : Img_tree.jpg Posisi : Kiri Atas
  14. 14. LATIHAN 2
  15. 15. REFERENSI  http://www.w3schools.com/  http://www.w3.org

×