Cara Membuat Background Gif di HTML

Posted on

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.

Baca Juga:  Cara Membuat List Sederhana dengan HTML dan CSS

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.

Baca Juga:  Cara Membuat Menu Dropdown Keren dengan HTML dan CSS

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!

/* Kode Anda… */
Baca Juga:  Cara Membuat Button Berwarna dengan HTML dan CSS