Cara Membuat Background Gif di HTML – Membuat background GIF di HTML dapat menjadi cara kreatif untuk meningkatkan estetika situs web Anda. Dalam dunia web design, background GIF telah menjadi salah satu tren yang populer karena kemampuannya untuk menambahkan sentuhan dinamis dan visual yang menarik. Dengan langkah-langkah yang sederhana, Anda dapat menambahkan elemen ini ke situs web Anda dengan mudah. Dalam artikel ini, kelashtml akan membahas langkah-langkah detail tentang cara membuat background GIF di HTML, secara khusus disajikan untuk pemula. Dengan mengikuti panduan ini, Anda akan belajar bagaimana menghadirkan elemen visual yang menarik dan dinamis ke dalam situs web Anda, serta meningkatkan pengalaman pengguna secara keseluruhan. Mari mulai dengan langkah pertama yang sederhana: membuat folder proyek background GIF.
Alat yang Harus Anda Siapkan
Berikut ini beberapa alat yang harus Anda siapkan untuk membuat bakground gif di html:
- Perangkat laptop,
- Notepad++ (Text editor code),
- Google chrome (Web browser),
- Niat yang kuat.
Cara Membuat Background Gif di HTML
1. Buat Folder Proyek Background GIF
Langkah pertama adalah membuat folder khusus untuk proyek background GIF Anda. Ini akan membantu Anda mengatur semua file yang terkait dengan proyek ini dengan baik.
2. Buat Folder GIF
Di dalam folder proyek, buat subfolder bernama “gif“. Di sinilah nantinya Anda akan menyimpan semua file GIF yang ingin Anda gunakan sebagai latar belakang. Download gif disini untuk di implementasikan ke dalam proyek background gif sebagai contoh awal.
3. Buat Sebuah File background.html
Buka editor teks favorit Anda dan buatlah file baru dengan nama “background.html“. File ini akan menjadi basis dari halaman web Anda.
Berikut ini source code html yang harus Anda tambahkan untuk membuat background gif di html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Background GIF</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="background"> <div class="content"> <h1>Welcome to My Website</h1> <p>This is some sample text. You can add more elements here.</p> </div> </div> </body> </html>
4. Buat File style.css
Selanjutnya, buatlah file CSS baru dengan nama “style.css“. File ini akan digunakan untuk mengatur tampilan halaman web, termasuk background GIF.
Berikut ini source code css yang harus Anda tambahkan untuk membat background gif di html:
body, html { margin: 0; padding: 0; height: 100%; } .background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('gif/giphy.gif') center center fixed; background-size: cover; } .content { text-align: center; padding: 20px; color: #fff; } h1 { font-size: 3em; } p { font-size: 1.5em; }
Pastikan untuk mengganti “nama_file.gif” dengan nama file GIF yang Anda ingin gunakan sebagai background.
5. Mengubah Tampilan Background GIF
Jika Anda ingin mengubah background GIF, cukup ganti nama file GIF yang disebutkan dalam properti background-image di file CSS.
6. Save & View Tampilan
Simpan semua perubahan yang Anda buat, dan buka file “background.html” dalam browser web Anda. Anda seharusnya melihat halaman web dengan background GIF yang telah Anda tentukan.
Preview hasil
Berikut ini preview hasil background gif di html jika Anda berhasil membuatnya:
Penutup
Dengan demikian, Anda sekarang memiliki pengetahuan yang cukup untuk mulai mengintegrasikan background GIF ke dalam situs web Anda sendiri. Jangan ragu untuk bereksperimen dengan berbagai file GIF dan tata letak, serta menyesuaikan gaya CSS sesuai dengan preferensi Anda. Dengan sedikit kreativitas dan pemahaman tentang HTML dan CSS, Anda dapat menciptakan latar belakang yang menarik dan dinamis untuk situs web Anda. Selamat mencoba!
