Pada tutorial sebelumnya saya telah membahas pseudo class dan pseudo element pada css, pada tutorial kali ini saya akan membahas tentang cara merubah warna background dengan css.
Background merupakan salah satu komponen website yang cukup penting. Background dapat memberikan dekorasi visual terhadap sebuah elemen, yang akan mengakibatkan peningkatan kemudahan nalar atau pengertian akan sebuah website. Untuk mempercantik suatu website, Anda bisa menggunakan gambar atau warna sebagai backgroundnya. Sehingga website Anda akan terlihat lebih menarik dan modern.
Anda tidak hanya bisa merubah background untuk halaman website saja, Anda juga bisa merubah warna dari background objek seperti paragraf, tabel serta obyek-obyek lainnya. Untuk merubah warna background dengan CSS, Anda memerlukan sebuah property background. Pada tutorial kali ini saya hanya akan membahas background-color dan background-image. Untuk nilai atau value dari suatu background bisa berisi nama warna dalam bahasa inggris, hexa color, atau RGB color.
Anda dapat merubah background suatu website atau objek lainnya dengan menggunakan properti ini. Sebagai contoh kita akan merubah warna background pada suatu website. Silahkan perhatikan script dibawah ini:
Silahkan simpan script diatas dengan format .html, misalkan kita simpan dengan nama “background.html”. Kemudian buka dengan browser kesayangan Anda. Hasilnya seperti dibawah ini:
Dari gambar diatas kita bisa melihat warna background berubah menjadi warna biru. Lihat kembali script diatas pada baris no. 7, kita menetapkan background pada body berwarna biru dan warna tulisan pada h1 berwarna putih.
Selain untuk merubah warna background suatu website, Anda juga dapat menggunakan perintah background-color untuk merubah warna background pada tag-tag HTML lainnya,
Selain background warna, Anda juga dapat merubah background suatu website dengan gambar. Untuk membuat background dengan gambar, bisa menggunakan perintah background-image. Sebagai contoh kita akan membuat suatu website dengan backgroun gambar buang, perhatikan script dibawah ini:
Silahkan simpan script diatas dengan format .html, misalkan kita simpan dengan nama “background-image.html”. Pastikan file gambar disimpan dalam satu folder dengan file background-image.html. Perhatikan script diatas pada baris no. 7, saya langsung menuliskan nama file gambar matahari.jpg pada bagian url-nya. Jika Anda menyimpan file gambar tidak satu folder dengan “background-image.html”, Anda tinggal menyesuaikan sesuai foldernya pada bagian url-nya.
Kemudian buka file “background-image.html” dengan browser kesayangan Anda. Hasilnya seperti dibawah ini:
Dari gambar diatas kita bisa melihat bahwa background gambar berhasil di pasang. Lihat kembali script diatas pada baris no. 7, kita menetapkan background-image pada body dengan gambar matahari dan warna tulisan merah pada h1.
Bagaimana? Mudah kan untuk merubah background dengan menggunakan CSS. Anda cukup menggunakan property background-color (untuk merubah warna) dan background-image(untuk merubah background gambar).
Demikianlah tutorial tentang cara merubah warna bakcground dengan css. Silahkan bagikan atau share artikel ini jika ada yang membutuhkan. Semoga bermanfaat!
Seseorang yang suka belajar sesuatu yang baru, terutama tentang pemrograman web. Senang berbagi tentang pengetahuan dan belajar dari yang lain.
