Tutorial Belajar CSS Part 18 – Merubah Background dengan CSS
Dalam tutorial ini kita akan membahas mengenai cara merubah background dari web dengan menggunakan CSS, CSS menyediakan beberapa fitur yang dapat digunakan untuk merubah tampilan background, baik menggunakan image ataupun warna.
Anda tidak hanya bisa merubah background di halaman web saja, anda juga bisa merubah warna dari background objek seperti paragraf, tabel serta obyek obyek lainnya, baik langsung saja kita bahas beberapa hal yang CSS Sediakan untuk mengatur background.
Video Tutorial Merubah Background dengan CSS
Background Color
Anda dapat mengganti background sebuah obyek dengan menggunakan properti ini, semisal ingin mengganti background web, atau bagian obyek lainnya, silahkan perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>Belajar Background CSS</title> <style type="text/css"> body { background-color:green; } </style> </head> <body> <h1>Ini contoh Penggunaan Property Background Color</h1> </body> </html> |
nah semisal kita simpan dengan nama background_color.html lalu kita buka di browser, maka hasilnya adalah sebagai berikut :
nah perhatikan untuk warna backgroundnya menjadi warna hijau, hal tersebut karena kita menggunakan property background-color, dengan selector body sehingga background webnya menjadi warna hijau.
Selain untuk background web anda juga dapat menggunakan perintah background-color pada obyek HTML lainnya, silahkan perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <title>Belajar Background CSS</title> <style type="text/css"> h1 { background-color: orange; } div { background-color: aqua; } p { background-color: yellow; } </style> </head> <body> <h1>Ini Adalah Contoh Background Image</h1> <div> isi dari obyek div <p>Paragraf Pertama Paragraf Pertama Paragraf Pertama</p> isi dari obyek div </div> </body> </html> |
semisal kita simpan dengan nama background-color2.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :
maka hasilnya seperti gambar diatas, penjelasannya sebagai berikut :
- h1 memiliki background berwarna orange karena skrip css h1{bacgkround-color:orange;}
- bagian obyek div mendapatkan background berwarna biru karena skrip css div{background-color:aqua;}
- paragraf akan mendapatkan background berwarna kuning karena skrip css p{background-color:yellow;}
Background Image
Selain background warna anda juga dapat merubah background dengan gambar, dengan menggunakan perintah background-image:
silahkan perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>Contoh Background Image</title> <style type="text/css"> body { background-image:url('gambar.jpg'); } </style> </head> <body> </body> </html> |
semisal kita simpan dengan nama background-image.html, dan pastikan file gambar yang digunakan (dalam contoh ini gambar.jpg) tersimpan dalam satu folder yang sama dengan file background-image.html
lalu silahkan buka file html background_image.html
maka hasilnya sebagai berikut :
terlihat background web akan sesuai gambar yang dipilih, gambar menjadi berulang karena ukuran resolusi gambar kecil, sehingga gambar akan ditampilkan secara berulang
Property Background-repeat
property ini digunakan untuk mengatur perulangan dari gambar yang digunakan sebagai berikut, hal ini digunakan jika gambar yang digunakan untuk background memiliki ukuran resolusi kecil, adapun beberapa value yang bisa anda gunakan adalah :
- repeat-x : digunakan untuk melakukan perulangan secara horizontal
- repeat-y : digunakan untuk melakukan perulangan secara vertikal
- no-repeat : digunakan untuk menonaktifkan fitur perulangan
Jadi penggunaan skripnya adalah seperti berikut ini :
|
1 2 3 4 5 6 7 |
<style type="text/css"> body { background-image:url('gambar.jpg'); background-repeat:repeat-x; } </style> |
maka hasilnya adalah sebagai berikut :
hasil background-repeat:repeat-x;
hasil background-repeat:repeat-y;
hasil background-repeat:no-repeat;
Bagaimana mudah bukan untuk mengatur background dengan menggunakan CSS, anda cukup menggunakan property background-color (untuk merubah warna) dan background-image(untuk merubah background gambar) serta menggunakan property background-repeat (mengatur perulangan dari gambar yang digunakan untuk background).
Baik sekian dulu kawan pembahasan kita mengenai cara merubah background dengan CSS, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa di tutorial selanjutnya.
