HTML atau Hypertext Markup Language merupakan bahasa pemrograman yang digunakan untuk membuat halaman web. Salah satu elemen penting dalam pembuatan halaman web adalah tampilan atau desain halaman tersebut. Salah satu cara untuk membuat tampilan halaman web menjadi lebih menarik adalah dengan memberikan background atau latar belakang pada halaman tersebut. Berikut adalah cara memberi background di HTML.
1. Menggunakan Background Color
Cara yang paling sederhana untuk memberi background pada halaman web adalah dengan menggunakan background color. Caranya adalah dengan menambahkan atribut style pada tag body seperti berikut:
<body style="background-color: #ffffff;">Pada contoh di atas, background color yang digunakan adalah putih (#ffffff). Kamu dapat mengganti nilai ini dengan kode warna lain yang kamu inginkan.
2. Menggunakan Background Image
Selain menggunakan background color, kamu juga dapat memberikan background pada halaman web dengan menggunakan background image atau gambar latar belakang. Caranya adalah dengan menambahkan atribut style pada tag body dan menambahkan CSS background-image seperti berikut:
<body style="background-image: url('nama_file_gambar.jpg');">Pada contoh di atas, kita menggunakan gambar dengan nama file “nama_file_gambar.jpg. Kamu dapat mengganti nama file dan path sesuai dengan letak file gambar pada server kamu.
3. Mengatur Ukuran Background Image
Jika kamu ingin mengatur ukuran gambar latar belakang, kamu dapat menambahkan atribut CSS background-size pada tag body seperti berikut:
<body style="background-image: url('nama_file_gambar.jpg'); background-size: cover;">Pada contoh di atas, kita menggunakan nilai “cover” pada background-size untuk membuat gambar latar belakang menutupi seluruh halaman web. Kamu juga dapat menggunakan nilai lain seperti “contain” atau “auto.
4. Mengatur Posisi Background Image
Selain mengatur ukuran gambar latar belakang, kamu juga dapat mengatur posisi gambar tersebut pada halaman web. Caranya adalah dengan menambahkan atribut CSS background-position pada tag body seperti berikut:
<body style="background-image: url('nama_file_gambar.jpg'); background-size: cover; background-position: center center;">Pada contoh di atas, kita menggunakan nilai “center center” pada background-position untuk menempatkan gambar latar belakang di tengah-tengah halaman web. Kamu juga dapat menggunakan nilai lain seperti “top left”, “bottom right”, dan sebagainya.
5. Menggabungkan Background Color dan Image
Terakhir, kamu juga dapat menggabungkan penggunaan background color dan image pada halaman web. Caranya adalah dengan menambahkan atribut CSS background pada tag body seperti berikut:
<body style="background: #ffffff url('nama_file_gambar.jpg') center center no-repeat; background-size: cover;">Pada contoh di atas, kita menggunakan nilai “no-repeat” pada background untuk menghindari pengulangan gambar latar belakang. Kamu juga dapat mengganti nilai ini dengan “repeat-x” atau “repeat-y” jika ingin menampilkan gambar latar belakang secara horizontal atau vertikal.
Kesimpulan
Memberikan background pada halaman web merupakan salah satu cara untuk membuat tampilan halaman tersebut lebih menarik. Kamu dapat memberikan background pada halaman web dengan menggunakan background color atau image. Selain itu, kamu juga dapat mengatur ukuran dan posisi gambar latar belakang sesuai dengan keinginan. Jangan lupa untuk menggabungkan penggunaan background color dan image jika diperlukan.
