Panduan belajar ini akan menunjukkan cara menggunakan gambar latar belakang dengan CSS. Jadi, mari kita mulai!
Bagaimana Memanfaatkan Beberapa Gambar Latar Belakang Dengan CSS?
CSS “ latar belakang ” properti adalah properti singkatan yang berisi properti background, background-attachment, clip, image, repeat, origin, size, dan position. Properti background dapat digunakan untuk menentukan URL dari beberapa gambar. Gambar-gambar itu kemudian diposisikan dan diatur sesuai.
Mari kita ambil contoh di mana satu elemen div hanya berisi satu gambar sebagai logo halaman web sedangkan yang kedua berisi tiga gambar.
Contoh: Menambahkan Beberapa Gambar Latar Belakang Dengan CSS
Dalam HTML, tambahkan elemen div untuk logo dan tentukan nama kelasnya. Misalnya, kami menamakannya ' logo ”. Div kedua menggunakan banyak gambar, jadi kami menamakannya “ multi-gambar ”. Namun, Anda dapat menentukan nama kelas sesuai preferensi Anda.
HTML
< div kelas = 'logo' >< / div >< div kelas = 'beberapa-gambar' >< / div >
Pada bagian selanjutnya, kita akan menyesuaikan gambar menggunakan properti background CSS.
Div gaya 'logo'.
.logo {lebar : 100% ;
tinggi : 50px ;
lapisan : 5px ;
batas : 5px ;
background-size : 100px ;
background-repeat : no-repeat ;
gambar latar belakang : url ( gambar/linux-logo.png ) ;
}
Elemen div dengan kelas “ logo ” diterapkan dengan properti berikut:
- “ lebar ” properti digunakan untuk menyetel lebar elemen menjadi “ 100% ”.
- “ tinggi Properti ” digunakan untuk mengatur ketinggian elemen menjadi “ 50px ”.
- “ lapisan Properti ” digunakan untuk menyetel “ 5px ” ruang di sekitar konten elemen yang ditentukan.
- “ batas Properti ” digunakan untuk menyetel “ 5px ” ruang di sekitar elemen.
- “ background-size Properti ” menyetel ukuran gambar latar belakang elemen sebagai “ 100px ”.
- “ background-repeat ” dengan nilai “ no-repeat ” menampilkan latar belakang hanya sekali.
- “ gambar latar belakang ” properti digunakan untuk menentukan URL gambar.
Gaya div 'beberapa gambar'.
.beberapa-gambar {lebar : 90% ;
tinggi : 45vh ;
batas : 1px mobil ;
lapisan : 20px ;
background-size : 150px ;
warna latar belakang : rgb ( 157 , 154 , 151 ) ;
gambar latar belakang : url ( gambar/kantor.png ) , url ( gambar/html.png ) , url ( gambar/laptop.png ) ;
background-repeat : no-repeat , no-repeat , no-repeat ;
background-position : kiri , tengah , Kanan ;
}
Sekarang, beri gaya wadah lainnya sebagai berikut:
- “ warna latar belakang ” properti menentukan warna latar belakang elemen.
- “ gambar latar belakang ” properti menentukan beberapa URL gambar.
- “ background-repeat ”Properti menetapkan nilai untuk gambar dalam urutan gambar yang ditentukan dalam properti background-image. Kedua gambar disetel sebagai tidak berulang artinya hanya akan ditampilkan di browser sekali.
- “ background-position ” menyesuaikan posisi gambar dalam urutan gambar yang ditentukan oleh properti background-image. Gambar pertama akan ditempatkan di sisi kiri, yang kedua di tengah dan yang ketiga akan ditempatkan di sisi kanan.
Dengan memberikan kode yang diberikan di atas, hasil di browser akan terlihat seperti ini:
Dengan cara ini, kita bisa mengatur posisi beberapa gambar dengan CSS.
Kesimpulan
Untuk membuat aplikasi menghibur dan interaktif, pengembang menggunakan berbagai gambar dan warna. Kita dapat mengatur banyak gambar dengan properti latar CSS, seperti background-position, background-repeat, background-size, dan lainnya. Manual ini telah mendemonstrasikan penggunaan beberapa gambar latar belakang dengan contoh CSS.