Pada awal artikel ini saya telah menyebutkan bahwa ada beberapa cara untuk membuat efek seperti ini, beberapa web developer lebih memilih untuk melakukannya dengan jQuery, dan beberapa lainnya menggunakan CSS, dan sebagian lainnya menggunakan Flash. Pada artikel ini kita akan melihat bagaimana untuk bisa membuat halaman web dengan menggunakan gambar latar belakang layar penuh dengan CSS.
CSS3 memungkinkan kita untuk bisa memilih antara beberapa nilai yang berbeda untuk bagian “background-size”. Bagian ini terdiri dari panjang, persentase, cover, dan contain. Nilai yang akan kita gunakan pertama adalah menutupi atau meng-cover nilai, yang akan mengubah skala gambar ke ukuran yang akan memungkinkan untuk mengisi area konten. Saya ingin menunjukkan bahwa dalam melakukan ini beberapa bagian dari gambar dapat dipotong tergantung pada resolusi layar atau dimensi dari jendela browser atau monitor Anda. ‘
Centro Genesis‘ adalah contoh yang baik. Lihatlah bagaimana menampilkan gambar latar belakang layar lebar dalam browser.
Sekarang kita lihat bagaimana gambar muncul di browser. Mayoritas foto adalah sama, itu hanya memotong sepotong gambar itu dalam rangka untuk mengisi ketinggian layar.
Kode untuk ini adalah menggunakan metode yang benar-benar sangat sederhana. Yang harus Anda lakukan adalah memasukkan beberapa baris CSS di file eksternal CSS anda atau pada bagian header halaman Anda.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Itu mudah. Sekarang mari kita lihat lebih dekat apa yang kita lakukan. Dengan baris pertama kita memanggil gambar latar belakang kita dan menerapkan beberapa gaya untuk itu, “background: url (images / bg.jpg)” adalah menarik atau menampilkan gambar kita yang sebenarnya. Kemudian “no-repeat” memberitahu browser untuk tidak mengulangi gambar, “center center” memberitahu browser ke pusat gambar horizontal dan vertikal, dan “fixed” memberitahu gambar untuk memperbaiki dirinya dalam posisi itu (tidak bergerak) dan tidak ter-scrolling jika kita melakukan scroll halaman.
Teknik ini sederhana dan teruji, tapi Anda bisa mengandalkan satu gambar untuk membuat semua ukuran resolusi itu menjadi baik dan enak dilihat. Bagaimana Anda memutuskan dimensi berapa yang digunakan untuk satu gambar latar belakang Anda? Jika Anda memiliki gambar yang memiliki luas 1900px dan seseorang mencoba untuk melihat situs Anda menggunakan ponsel mereka, butuh waktu yang cukup lama untuk bisa memuat gambarnya agar bisa tampil. Tetapi jika Anda mencoba untuk menembak kesenjangan dan membuat gambar yang memiliki ukuran sekitar 1.000 px maka gambar dapat menjadi pecah dan blur bagi siapa saja melihat situs Anda di monitor layar lebar dengan resolusi diatur ke 1440px.
Sebelum Anda mengubah variabel seperti resolusi layar dan bentuk monitor yang dapat membuat kita menjadi frustasi, izinkan saya untuk memberikan jawaban yang Anda cari: pertanyaan media. CSS akan memungkinkan Anda untuk menentukan atribut yang berbeda untuk berbagai parameter. Dengan kata lain, Anda dapat mengatur permintaan media atau media queries yang memberitahu browser untuk memuat sebuah largeBG.jpg, mediumBG.jpg, atau smallBG.jpg tergantung pada dimensi apa penampil di browser itu.
Sebagai contoh, daripada mendefinisikan gambar latar belakang Anda dalam HTML situs Anda katakanlah Anda membuat div untuk halaman Anda dan menetapkan id dari “container”. Cukup standar. Sama seperti yang kita lakukan di metode pertama, kita akan menetapkan “container” div id kita dengan gambar latar belakang kita, tambahkan beberapa gaya, kemudian kirim ke cover. Saya akan merekomendasikan membuat gambar “largeBG.jpg” yang memiliki resolusi 1440px sampai 1900px.
#container{
background: url(images/largeBG.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Sekarang kita punya versi besar mengatur foto latar belakang kita, kita dapat beralih ke media. Inisedikit berbeda karena kita harus melakukan query media untuk memberitahu browser untuk memuat versi yang lebih kecil dari gambar latar belakang kita. Saya biasanya mengatur media query untuk lebar resolusi layarnya 1024px, karena ini adalah resolusi iPad dan kemungkinan penampil mengandalkan pada jaringan daripada wifi kecepatan tinggi untuk memuat halaman. Untuk mengatur query media untuk 1024px, Anda cukup menambahkan baris ini ke CSS anda.
@media only screen and (max-width: 1024px) and (orientation:landscape) {
#container { background: url(images/mediumBG.jpg) 50% 0 no-repeat fixed; !important; background-size: 100% auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
Background-size nya sudah agak opsional pada saat ini. Anda tidak dapat mengatur resolusi dari iPad Anda, tetapi Anda harus ingat bahwa media query ini tidak secara spesifik menargetkan iPad, tetapi menargetkan resolusi layar. Karena pasti masih ada sebagian besar surfer web pada monitor yang lebih tua diatur dari 1024 × 768, ini merupakan langkah yang cukup mudah untuk meningkatkan pengalaman menonton mereka.
Setelah mendefinisikan tampilan laneskap untuk iPad ini mari kita membuat media query untuk tampilan potret. Tergantung pada gambar, Anda mungkin ingin mempertimbangkan meletakkannya sepotong, versi lebih tinggi dari gambar Anda di sini sehingga display layar penuh tanpa terlalu terdistorsi dan pecah. Anda juga bisa menyesuaikan posisi untuk memastikan citra foto Anda tetap selaras dengan benar.
@media only screen and (min-width: 768px) and (max-width: 991px) {
#container { background: url(images/mediumTallBG.jpg) 50% 80% no-repeat fixed !important
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
Akhirnya, kita dapat mengatur media query lainnya untuk perangkat mobile.
@media only screen and (min-width: 0px) and (max-width: 767px) {
#container { background: url(images/smalBG.jpg) 50% 80% no-repeat fixed !important; background-size: auto !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
