Saat ini, website dengan gambar latar belakang responsif sedang banyak diminati. Situs web responsif memberikan pengalaman pengguna yang ideal kepada pengguna di hampir semua perangkat termasuk ponsel, tablet, atau desktop. Gambar responsif dapat menyesuaikan latar belakang website, ukuran layar, dan dimensi. Gambar responsif memastikan kualitas dan proporsi tetap terjaga. Selain itu, situs web dengan gambar latar belakang responsif dimuat dengan cepat.
Panduan ini akan memberikan petunjuk untuk menyesuaikan gambar latar belakang dengan dimensi layar.
Bagaimana Menyesuaikan Gambar Latar Belakang dengan Dimensi Layar?
Gambar dapat beradaptasi dengan dimensi layar dengan mengikuti petunjuk langkah demi langkah yang diberikan di bawah ini.
Langkah 1: Buat Struktur HTML
Pertama, buat struktur HTML dan tambahkan style sheet eksternal menggunakan
< html >
< kepala >
< tautan rel = 'lembar gaya' href = 'gaya.css' >
< judul > Gambar Latar Belakang Responsif judul >
kepala >
< tubuh >
-- Area untuk menambahkan konten lainnya-- >
tubuh >
html >
Langkah 2: Terapkan CSS
Sekarang, terapkan CSS ke “ tubuh ' bagian. Pertama, tentukan gambar latar belakang. Untuk tujuan itu, gunakan “ gambar latar belakang ” dan tentukan “ url() ” nilai yang berisi alamat file gambar.
Setelah itu, gunakan “ gambar latar belakang ” untuk menentukan ukuran gambar, tombol “ ulangi latar belakang ” properti untuk mengatur pengulangan gambar, dan “ lampiran latar belakang ” untuk mengatur apakah gambar akan bergulir bersama halaman lainnya atau tidak. Terakhir, atur “ batas ' Dan ' lapisan ' ke ' 0 ”:
tubuh {gambar latar belakang: url ( 'uji-gambar.jpg' ) ;
ukuran latar belakang: 100 % 100 % ;
/* Skalakan gambar menjadi 100 % lebar dan 100 % tinggi */
pengulangan latar belakang: tidak ada pengulangan;
lampiran latar belakang: diperbaiki;
batas: 0 ;
lapisan: 0 ;
/* Opsional: Memperbaiki latar belakang */
}
Keluaran
Ini adalah output sebelum mengontrak jendela browser:
Setelah Kontraksi browser:
Keluaran di atas mengonfirmasi bahwa gambar telah menyesuaikan latar belakang dengan dimensi layar.
Kesimpulan
Untuk menyesuaikan gambar latar belakang dengan dimensi layar, pertama-tama, sertakan “ area pandang ” di bagian kepala untuk mengontrol dimensi dan penskalaan. Kemudian, buat struktur HTML dan terapkan CSS. Di CSS, atur “ ukuran latar belakang ” nilai properti ke “ menutupi ” nilai untuk menskalakan tinggi dan lebar gambar. Artikel ini telah menyajikan panduan lengkap untuk mengadaptasi gambar latar belakang dengan dimensi layar.