Mengatur GIF “ Format Pertukaran Grafik ” sebagai gambar latar menambahkan elemen yang menarik secara visual pada desain. GIF memungkinkan pengembang untuk menyampaikan informasi atau menyoroti produk atau layanan yang membantu menciptakan identitas visual merek. Namun, pengembang harus memastikan bahwa penggunaan GIF tidak membebani halaman web atau mengganggu pengguna dari konten utama.

Artikel ini menunjukkan prosedur pengaturan GIF sebagai gambar latar belakang pada halaman web.

Bagaimana Cara Mengatur GIF sebagai Gambar Latar Belakang di Halaman Web?

Menyetel GIF sebagai gambar latar belakang membantu menciptakan elemen yang menarik dengan menambahkan elemen visual.

GIF sangat berguna di situs web yang ingin menyampaikan rasa keceriaan atau imajinasi, atau di halaman yang ingin menonjolkan produk atau fitur tertentu. Untuk mengaturnya, sebagai gambar latar kunjungi contoh berikut:

Contoh 1: Mengatur GIF sebagai Latar Belakang Tetap

Karena elemen HTML yang membantu membangun konten halaman web ditempatkan di dalam “ ” tag. Itu sebabnya, memilih ' tubuh ” elemen dan menerapkan properti CSS di atasnya. Ini memengaruhi semua elemen HTML yang berisi ' ” tag.

Misalnya, “

' Dan '

” tag digunakan sebagai konten halaman web. Lihat cuplikan kode di bawah ini:

< tubuh >
< h1 > Mengatur GIF sebagai Gambar Latar Belakang Pada Halaman h1 >
< P > GIF ini telah ditambahkan sebagai gambar latar belakang di seluruh halaman menggunakan 'gambar latar belakang' Properti. Artikel ini didukung oleh Linuxhint. P >
tubuh >

Sekarang, pilih elemen HTML 'body' di dalam ' 'tag atau terpisah' CSS ” untuk menerapkan gaya pada halaman web:

tubuh {
background-image: url ( 'laut.gif' ) ;
background-repeat: no-repeat;
background-size: cover;
padding:50px;
ukuran font: x-besar;
warna putih;
}

Di blok kode di atas:

• • Pertama, “ url() ” metode digunakan yang menyimpan jalur “ GIF ” berkas. Dan metode ini diteruskan sebagai nilai ke CSS “ gambar latar belakang ' Properti.
  • Selanjutnya, atur “ no-repeat ” sebagai nilai untuk CSS “ background-repeat ” properti untuk pengulangan file GIF.
  • Kemudian, atur nilai “ menutupi ' ke CSS ' background-size ” properti untuk menutupi semua ruang yang tersedia
  • Setelah itu berikan nilai “ 50px ' Dan ' x-besar ' ke CSS ' lapisan ' Dan ' ukuran huruf ” properti, masing-masing. Ini menambahkan spasi di sekitar teks dan memperbesar ukuran font.

Setelah kompilasi, halaman web terlihat seperti ini:

Output di atas menunjukkan bahwa gif telah ditambahkan sebagai latar belakang pada halaman web.

Contoh 2: Mengatur GIF sebagai Latar Belakang yang Dapat Digulir

Awalnya, buat struktur HTML untuk membuat konten Halaman Web seperti ini:

< div kelas = 'berisi' >
< h1 > Mengatur GIF sebagai Gambar Latar Belakang Pada Halaman h1 >
< P > GIF ini telah ditambahkan sebagai gambar latar belakang di seluruh halaman menggunakan 'gambar latar belakang' Properti. Artikel ini didukung oleh Linuxhint. P >
div >

< div >
< h3 gaya = 'warna putih;' > Konten yang ditulis di luar 'div' elemen h3 >
div >

Dalam kode di atas:

• • Pertama, orang tua “
    ” tag digunakan dengan kelas “ berisi ”.
  • Selanjutnya, gunakan “ h1 ' Dan ' P ” Elemen HTML dan berikan konten dummy kepada mereka.
  • Setelah itu, buat lagi “
    ” dan gunakan “

    ” tag dengan memberikan data dummy padanya.

Sekarang, tambahkan GIF sebagai latar belakang pada halaman web dengan memasukkan properti CSS berikut:

.contai {
background-image: url ( sea.gif ');
background-repeat: no-repeat;
background-size: cover;
tinggi: 100vh;
tampilan: fleksibel;
menyelaraskan-item: pusat;
justify-content: center;
arah fleksibel: kolom;
warna putih;
ukuran font: besar;
perataan teks: tengah;
bantalan: 2rem;
}

Deskripsi blok kode yang digunakan di atas:

• • Pertama, atur “ image-path ”, “ no-repeat t” dan “ menutupi ” sebagai nilai untuk CSS “ gambar latar belakang ”, “ background-repeat ' Dan ' background-size ” properti, masing-masing.
  • Selanjutnya, atur nilai “ 100vh ' Dan ' melenturkan ' ke CSS ' tinggi ' Dan ' menampilkan ” properti.
  • Setelah itu, gunakan CSS “ warna ”, “ ukuran huruf ”, “ perataan teks ' Dan ' lapisan ” untuk menerapkan gaya pada konten.

Setelah akhir proses kompilasi, halaman web terlihat seperti ini:

Output menampilkan bahwa “ GIF ” telah disisipkan sebagai gambar latar di seluruh halaman.

Kesimpulan

Untuk menyetel GIF sebagai gambar latar di halaman web, CSS “ gambar latar belakang Properti ” digunakan pada HTML “ tubuh ” elemen. Properti CSS yang diterapkan ke elemen 'body' secara otomatis diterapkan ke semua elemen yang memuatnya. Dengan mengatur “ 100vh ” sebagai nilai untuk properti ketinggian, efek pengguliran juga dapat diaktifkan. Ini memungkinkan gif latar belakang untuk bergerak di sepanjang gulungan. Artikel ini telah mendemonstrasikan cara menyetel GIF sebagai gambar latar belakang di halaman web.