Lihatlah situs web populer saat ini dan satu perawatan desain yang pasti Anda lihat adalah gambar latar belakang layar yang besar. Salah satu tantangan dengan menambahkan gambar ini berasal dari praktik terbaik bahwa situs web harus merespons berbagai ukuran layar dan perangkat — pendekatan yang dikenal sebagai desain web responsif.
Satu Gambar untuk Banyak Layar
Karena tata letak situs web Anda berubah dan diskalakan dengan ukuran layar yang berbeda, demikian juga gambar latar belakang ini harus menyesuaikan ukurannya. Faktanya, "gambar yang mengalir" ini adalah salah satu bagian penting dari situs web responsif (bersama dengan kisi yang mengalir dan kueri media). Ketiga bagian tersebut telah menjadi bahan pokok desain web responsif sejak awal, tetapi menambahkan responsif selalu cukup mudah gambar sebaris ke situs (gambar sebaris adalah grafik yang dikodekan sebagai bagian dari markup HTML), melakukan hal yang sama dengan gambar latar (yang ditata ke dalam halaman menggunakan properti latar belakang CSS) telah lama memberikan tantangan yang signifikan bagi banyak desainer web dan front end pengembang. Untungnya, penambahan properti "background-size" di CSS telah memungkinkan hal ini.
Dalam artikel terpisah, kami membahas cara menggunakan Ukuran latar belakang properti CSS3 untuk meregangkan gambar agar pas di jendela, tetapi ada cara yang lebih baik dan lebih berguna untuk diterapkan pada properti ini. Untuk melakukan ini, kami akan menggunakan kombinasi properti dan nilai berikut:
ukuran latar belakang: sampul;
Properti kata kunci penutup memberi tahu browser untuk menskalakan gambar agar sesuai dengan jendela, terlepas dari seberapa besar atau kecil jendela itu. Gambar diskalakan untuk menutupi seluruh layar, tetapi proporsi asli dan rasio aspek tetap utuh, mencegah gambar itu sendiri terdistorsi. Gambar ditempatkan di jendela sebesar mungkin sehingga seluruh permukaan jendela tertutup. Ini berarti bahwa Anda tidak akan memiliki titik kosong di halaman Anda atau distorsi apa pun pada gambar, tetapi juga berarti beberapa gambar mungkin terpotong tergantung pada rasio aspek layar dan gambar di pertanyaan. Misalnya, tepi gambar (baik atas, bawah, kiri, atau kanan) mungkin terpotong pada gambar, bergantung pada nilai yang Anda gunakan untuk properti posisi latar belakang. Jika Anda mengarahkan latar belakang ke "kiri atas", kelebihan apa pun pada gambar akan terlepas dari sisi bawah dan kanan. Jika Anda memusatkan gambar latar belakang, kelebihannya akan terlepas dari semua sisi, tetapi karena kelebihan itu tersebar, dampaknya pada satu sisi akan berkurang.
Cara Menggunakan 'background-size: cover;'
Saat membuat gambar latar belakang Anda, ada baiknya untuk membuat gambar yang cukup besar. Meskipun browser dapat membuat gambar menjadi lebih kecil tanpa dampak nyata pada kualitas visual, saat browser memperbesar dan gambar ke ukuran yang lebih besar dari dimensi aslinya, kualitas visual akan menurun, menjadi buram dan pixelated. Kelemahannya adalah halaman Anda mendapat pukulan kinerja saat Anda mengirimkan gambar raksasa ke semua layar. Ketika Anda melakukan ini, pastikan untuk melakukannya dengan benar siapkan gambar-gambar itu untuk kecepatan unduh dan pengiriman web. Pada akhirnya, Anda perlu menemukan media bahagia antara ukuran dan kualitas gambar yang cukup besar dan ukuran file yang masuk akal untuk kecepatan unduh.
Salah satu cara umum untuk menggunakan penskalaan gambar latar belakang adalah ketika Anda ingin gambar itu mengambil latar belakang penuh halaman, apakah halaman itu lebar dan dilihat di komputer desktop atau jauh lebih kecil dan dikirim ke perangkat genggam, seluler perangkat.
Unggah gambar Anda ke host web Anda dan tambahkan ke CSS Anda sebagai gambar latar belakang:
background-image: url (kembang api di atas wdw.jpg);
background-repeat: tidak-ulangi;
latar belakang-posisi: tengah tengah;
lampiran-latar belakang: diperbaiki;
Tambahkan CSS awalan browser terlebih dahulu:
-webkit-background-size: sampul;
-moz-background-size: penutup;
-o-background-size: penutup;
Kemudian tambahkan properti CSS:
ukuran latar belakang: sampul;
Menggunakan Gambar Berbeda yang Sesuai dengan Berbagai Perangkat
Meskipun desain responsif untuk pengalaman desktop atau laptop penting, variasi perangkat yang dapat mengakses web telah berkembang secara signifikan, dan berbagai ukuran layar hadir dengan bahwa.
Seperti yang disebutkan sebelumnya, memuat gambar latar responsif yang sangat besar pada smartphone, misalnya, bukanlah desain yang efisien atau sadar bandwidth.
Pelajari bagaimana Anda dapat menggunakan pertanyaan media untuk menyajikan gambar yang sesuai dengan perangkat yang akan menampilkannya, dan lebih meningkatkan kompatibilitas situs web Anda dengan perangkat seluler.