Dokumen tersebut membahas tentang CSS background yang digunakan untuk menentukan tampilan dan efek pada elemen HTML melalui properti seperti background-color untuk warna latar belakang, background-image untuk gambar latar belakang, background-repeat untuk pengulangan gambar, background-position untuk posisi gambar, dan background-attachment untuk menentukan gambar tetap atau bergerak saat di-scroll. Properti tersebut dapat ditulis secara singkat menggunakan shorthand property background.

1. CSS BACKGROUND
AMIROH, S.KOM
Save a lot of works with…

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. BACKGROUND-COLOR
 Digunakan untuk menentukan warna background sebuah elemen HTML
Untuk menentukan warna latar
belakang halaman web

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. BACKGROUND-REPEAT
 Digunakan untuk menentukan arah pengulangan tampilan gambar
 Nilai property:

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. BACKGROUND-POSITION
 Digunakan untuk menentukan letak posisi gambar.
 Value:

8. CONTOH

9. Posisi Gambar di tengah
halaman web
Posisi Gambar di kanan bawah
halaman web
Posisi Gambar di kanan bawah
halaman web

10. BACKGROUND-ATTACHMENT
 Digunakan untuk menentukan tampilan background tetap (fixed) atau
bergerak (scroll) ketika layar browser digulung

11. Contoh
Background tidak menggulung ketika
Scroll browser
Background menggulung ketika
Scroll browser

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. LATIHAN 1
Ketentuan:
Judul : Bergaris bawah
Alignment : Left
Background : Img_tree.jpg
Posisi : Kiri Atas

14. LATIHAN 2

15. REFERENSI
 http://www.w3schools.com/
 http://www.w3.org