CSS Background dan Cara Menggunakan CSS Background
Pada tutorial sebelumnya tentang CSS, sudah dibahas tentang Warna pada CSS dan Cara Penggunaan Warna Pada CSS. Baca : Warna pada CSS dan Cara Penggunaan Warna Pada CSS.
Bagaimana cara mengatur latar belakang (background) berbagai elemen HTML? Pada tutorial ini akan dibahas tentang Background pada CSS. Properti latar belakang CSS ini digunakan untuk menentukan efek latar belakang elemen HTML.
Properti Latar Belakang (Background) CSS yang akan dibahas antara lain:
- background-color, digunakan untuk mengatur warna lata belakang sebuah elemen HTML.
- background-image, digunakan untuk mengatur gambar latar belakang sebuah elemen HTML.
- background-repeat, digunakan untuk mengontrol perulangan (looping) gambar di latar belakang.
- background-attachment, digunakan untuk mengontrol pengguliran gambar (scroll atau fixed).
- background-position, digunakan untuk mengontrol posisi gambar pada latar belakang.
- background, digunakan sebagai cara singkat untuk menentukan beberapa properti sekaligus dalam latar belakang.
Baik, sekarang bagaimana cara menggunakan masing-masing properti latar belakang di atas?
Cara Menggunakan CSS background-color
CSS background-color digunakan untuk menentukan warna latar belakang dari elemen HTML. Untuk cara penggunaanya perhatikan contoh berikut ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>Belajar CSS background-color Bersama SolusiLain.Com</title> <style> body{ background-color: #00b5cc; } </style> </head> <body> <h1>Halo Gais...</h1> <p>Halaman ini diberikan background warna menggunakan CSS background-color.</p> </body> </html> |
Hasil dari contoh penggunaan CSS background-color di atas terlihat pada gambar di bawah ini.
Hasil Penerapan CSS background-color
Contoh di atas adalah penerapan CSS background-color untuk memberikan warna background halaman karena diberikan pada selector body. Kalian dapat memberikan background untuk elemen <h1> dengan menambahkan baris code di CSS sebegai berikut:
1 2 3 |
h1{ background-color: #1f3a93; } |
Dengan penambahan baris tersebut di CSS maka setiap elemen H1 yang berada di halaman tersebut akan diberikan warna background #1f3a93 .
Gunakan metode inline css jika kalian tidak ingin memberikan background ke semua elemen. Contoh penerapan CSS background-color dengan metode inline CSS adalah seperti ini:
1 |
<p style="background-color: #f7ca18;">Paragraf ini diberikan background warna menggunakan CSS background-color.</p> |
Cara Menggunakan CSS background-image
CSS background-image digunakan untuk mengatur gambar latar belakang sebuah elemen HTML. Secara default, background gambar akan diulang (repeat) sehingga memenuhi seluruh elemen. Untuk cara penggunaanya silahkan ikuti contoh di bawah ini. Namun sebelumnya siapkan gambar yang akan dijadikan sebagai latar belakang. Letakkan dalam folder “images” pada folder web kalian.
Cohtoh penggunaan CSS background-image:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>Belajar CSS background-image Bersama SolusiLain.Com</title> <style> body{ background-image: url("images/bawal.jpg"); } </style> </head> <body> <h1>Halo Gais...</h1> <p>Halaman ini diberikan background warna menggunakan CSS background-image.</p> </body> </html> |
Dari contoh di atas, menghasilkan tampilan seperti berikut ini.
Hasil Penerapan CSS background-image
Cara Menggunakan CSS background-repeat
Secara default, properti background-image akan mengulang (repeat) gambar baik secara horizontal maupun vertikal. Beberapa gambar mungkin hanya perlu diulang secara horizontal saja atau vertikal saja atau bahkan tidak diulang (no-repeat).
Baik, untuk cara penggunaan CSS background-repeat silahkan ikuti contoh di bawah ini.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <title>Belajar CSS background-repeat Bersama SolusiLain.Com</title> <style> body{ background-image: url("images/bawal.jpg"); background-repeat: no-repeat; background-position: left top; } </style> </head> <body> <h1>Halo Gais...</h1> <p>Halaman ini diberikan background menggunakan CSS background-repeat.</p> </body> </html> |
Hasil dari contoh diatas dapat kalian lihat di bawah ini:
Hasil Penerapan CSS background-repeat
Untuk nilai dari properti background-repeat, kalian bisa menggunakan repeat-x untuk mengulang vertikal saja dan repeat-y untuk mengulang horizontal saja. Silahkan dicoba sesuai kebutuhan kalian ya.
Cara Menggunakan CSS background-attachment
CSS background-attachment digunakan untuk mengontrol pengguliran gambar (scroll atau fixed). Cara penggunaannya silahkan diikuti contoh di bawah ini.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>Belajar CSS background-attachment Bersama SolusiLain.Com</title> <style> body{ background-image: url("images/pantai_panjang.jpg"); background-repeat: no-repeat; background-position: left top; background-attachment: fixed; } </style> </head> <body> <h1>Halo Gais...</h1> <p>Halaman ini diberikan background menggunakan CSS background-attachment.</p> </body> </html> |
Hasil CSS background-attachment
Cara Menggunakan CSS background property (shorthand)
Kalian juga dapat mempersingkat kode untuk menentukan semua properti latar belakang dalam satu properti tunggal dengan cara yang disebut dengan shorthand property.
Misal ada kode CSS berikut:
1 2 3 4 5 6 |
body{ background: #ffffff; background-image: url("images/pantai_panjang.jpg"); background-repeat: no-repeat; background-position: left top; } |
Dapat disingkat dengan kode CSS berikut:
1 2 3 |
body{ background: #ffffff url("images/pantai_panjang.jpg") no-repeat left top; } |
Saat menggunakan shorthand property urutan nilai propertinya adalah:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Jika salah satu nilai properti tidak ada, itu tidak masalah asalkan nilai properti lainnya ada dalam urutan di atas.
Demikian tutorial CSS Background dan Cara Menggunakan CSS Background, semoga bermanfaat.
