Menurut kamu apa yang akan terjadi jika suatu website tidak memakai background atau design sedikit pun ?, Tentu akan membuat kita mudah bosan dan malas berkunjung kembali bukan ?, maka dari itu kita perlu mengetahui cara mengubah background dengan gambar di HTML . Perlu kamu ketahui, bahwa hanya sebagian kecil website yang menggunakan gambar sebagai background utamanya. kenapa demikian, berikut ini merupakan kekurangan dan kelebihan pemakaian background gambar versi kodewebsite.
Mengubah Background Gambar di HTML
Kelebihan dan Kekurangan
Kekurangan pemakaian Background Gambar :
- Kecepatan loading website berkurang.
- Gambar dengan resolusi kurang, tampilan halaman akan terlihat jelek.
- Tidak semua orang menyukai gambar yang ditampilkan, hal ini dipengaruhi oleh kebudayaan, agama, dan gaya hidup.
- Gambar yang tidak diganti dalam jangka waktu yang panjang, membuat pengunjung bosan.
Kelebihan dari Background Gambar di HTML :
- Jika gambar terasa indah dimata pengunjung, Akan Meningkatkan pengalaman pengguna.
- Website tampak dinamis dan profesional.
- Website kita akan lebih mudah diingat orang.
Mengetahui kekurangan dan kelebihan diatas. Maka penempatan background gambar, sebaiknya hanya dilakukan di halaman utama website (Home/Beranda). Mengapa demikian ?, jika di halaman lain seperti artikel atau content, dapat menurunkan ranking google.
Penempatan Kode HTML
Untuk menampilkan gambar, kita bisa menggunakan atribut background=”alamat dan nama gambar beserta ekstensinya” yang akan ditempatkan di tag <body>.
Pertama yang kamu butuhkan adalah dua buah aplikasi yaitu edit text dan browser. untuk edit text kalian bisa gunakan notepad atau notepad++ dan sejenisnya, untuk aplikasi browser kalian bisa gunakan google chrome, uc browser, opera mini, mozila firefox dan sejenisnya.
Setelah itu buat folder dengan nama “latihan” (tanpa tanda petik) dan simpan gambar yang ingin dijadikan background ke folder “latihan”. Ubah terlebih dahulu nama gambar menjadi “aku.jpg” (tanpa tanda petik ). Selanjutnya mari kita aplikasikan, Silahkan buka notepadnya dan ketikan kode seperti berikut ini :
<html> <head> <title>ini digunakan untuk judul halaman</title> </head> <body background="aku.jpg"> <h4>LIHAT GAMBAR DIRIKU</h4> <h1>INILAH BACKGROUNDNYA </h1> </body> </html>
Simpan ke folder latihan, dan beri nama “tampil_gambar.html” (tanpa tanda petik). Jika sudah, silahkan buka dengan aplikasi browsernya, kurang lebih akan tampak seperti gambar berikut ini :
<body background=”aku.jpg”>