Materi 5 : Background Color dan Background Gambar

Background Color dan Background Gambar – Sebelum masuk lebih jauh tentang materi ini, ada baiknya jika kalian mempelajari kembali materi tentang tag – tag html atau kalian bisa belajar di materi Kamus HTML. Background color dan background gambar sangat sering di gunakan oleh para web designer untuk memodifikasi webnya, baik itu untuk keseluruhan website atau hanya pada menu navigasi. Mengapa di katakan menu navigasi? Karena banyak designer yang sengaja memberikan background gambar pada menu navigasi website mereka agar terlihat unik dan lebih menarik.

Background Color dan Background Gambar

Background Color

Property Background color atau background warna pada css cukup sederhana yaitu background-color. Untuk lebih jelasnya, silahkan lihat contoh penggunaannya berikut ini

/* contoh penggunaan background color */

body {
 background-color: #40e0d0;
}

Hasilnya

Silahkan tentukan bagian mana yang akan kalian ubah backgroundnya dengan cara memilih selectornya, pada contoh di atas saya gunakan selector body yang artinya saya akan merubah background website saya. Berikutnya adalah gunakan property background-color untuk mengubah warna latar dan jangan lupa berikan nilai pada property background-color, pada contoh di atas menggunakan warna biru muda yang memilik kode unik #40e0d0. Untuk memilih warna silahkan gunakan warna default seperti red, green, black, white atau kalian bisa gunakan kode color hexa, ada banyak sekali di internet yang membahas tentang kode warna html.

Background Gambar

Selain memberikan warna pada latar, kalian juga dapat memberikan efek latar dengan sebuah gambar pada website kalian. Property yang akan kita gunakan adalah background-image. Untuk lebih jelasnya, perhatikan contohnya berikut ini

/* contoh penggunaan background image */

body {
 background-image: url(bg.jpg);
}

Hasilnya

Ada beberapa point yang harus kalian perhatikan saat menambahkan file gambar pada koding kalian adalah perhatikan letak gambar yang akan kita tambahkan, apakah gambar tersebut berada di folder lain atau berada satu folder dengan file koding kalian.

Jika gambarnya berada di folder lain, maka penulisaan kodenya seperti ini

/* Jika file berada dalam folder */

body {
 background-image: url(namafolder/namagambar.ekstensifile);
 background-image: url(gambar/bg.jpg);
}

Adapun jika gambarnya berada dalam folder yang sama dengan file koding kita, maka penulisaanya adalah langsung menuliskan nama gambarnya.

Sekian materi kali ini tentang background color dan gambar, semoga mudah di pahami. Jika ada yang belum jelas, silahkan tulis komentar kalian di kolom komentar di bawah ini.

Share :