Pendahuluan
Saat kita membuat sebuah halaman web menggunakan HTML, tampilan visual menjadi sangat penting. Salah satu cara untuk membuat tampilan web menjadi lebih menarik adalah dengan menambahkan background. Background di sini bisa berupa gambar atau warna latar belakang. Pada artikel kali ini, kita akan membahas cara menambahkan background di HTML.
Menambahkan Background dengan Warna
Cara termudah untuk menambahkan background di HTML adalah dengan menambahkan warna latar belakang pada halaman web. Caranya adalah dengan menggunakan atribut style pada tag body. Berikut adalah contoh kodenya:
Kode di atas akan memberikan warna putih (#ffffff) sebagai latar belakang pada halaman web. Kamu bisa mengganti kode warna tersebut dengan kode warna lain yang kamu inginkan.
Menambahkan Background dengan Gambar
Selain menggunakan warna, kita juga bisa menambahkan background di HTML dengan gambar. Caranya adalah dengan menggunakan atribut style pada tag body seperti pada contoh di bawah ini:
Kamu hanya perlu mengganti “nama-file-gambar.jpg” dengan nama file gambar yang ingin kamu gunakan sebagai background. Pastikan file gambar tersebut berada di direktori yang sama dengan file HTML kamu.
Mengatur Ukuran Gambar
Setelah kamu berhasil menambahkan background dengan gambar, kamu bisa mengatur ukuran gambar tersebut agar sesuai dengan halaman web yang kamu buat. Caranya adalah dengan menggunakan atribut background-size pada tag body. Berikut adalah contoh kodenya:
Dalam contoh di atas, atribut background-size diatur sebagai “cover” yang akan membuat gambar background menutupi seluruh halaman web sesuai dengan ukuran yang ada.
Mengatur Posisi Gambar
Selain ukuran, kamu juga bisa mengatur posisi gambar background di halaman web. Caranya adalah dengan menggunakan atribut background-position pada tag body. Berikut adalah contoh kodenya:
Dalam contoh di atas, atribut background-position diatur sebagai “center” yang akan membuat gambar background berada di tengah halaman web.
Mengulang Gambar
Jika kamu ingin menampilkan gambar background secara berulang di halaman web, kamu bisa menggunakan atribut background-repeat pada tag body. Berikut adalah contoh kodenya:
Dalam contoh di atas, atribut background-repeat diatur sebagai “repeat-y” yang akan membuat gambar background berulang secara vertikal.
Conclusion
Itu dia cara menambahkan background di HTML. Kamu bisa menggunakan warna atau gambar sebagai background dan mengatur ukuran, posisi, dan pengulangan gambar sesuai dengan kebutuhan halaman web kamu. Semoga artikel ini bermanfaat dan membantu kamu dalam membuat halaman web yang menarik.