Full-width background dengan CSS

Cross-posted with LeapUp Blog

Salah satu trend antarmuka pada pengembangan web yang masih sering digunakan oleh developer adalah gambar besar yang full-width di bagian awal halaman. Misalnya seperti yang diterapkan Leap Up di landing page. Selain di bagian awal, full-width image juga biasanya digunakan di tengah halaman untuk mempertegas section tertentu. Misalnya seperti yang ada di section ketiga dari salah satu web sekolah yang ikut program Eka Bima ini.

Untuk membuat full-width image seperti itu, kita akan mulai menggunakan metode seperti ini

background:url('gambar.jpg');

Untuk penggunaan gambar.jpg disitu saya gunakan gambar berikut. Jika hanya menggunakan code CSS seperti itu, salah satu kemungkinan yang terjadi adalah jika gambarnya besar maka dia akan terlalu zoom.Full width background CSS

Yang terlihat hanya awan, padahal gambar yang saya inginkan, bangunannya bisa terlihat. Supaya bangunannya terlihat saya tambahkan baris code di CSS saya

background-size:cover;

Dengan menambahkan background-size:cover, maka hasilnyaFull width background CSS2

Sederhananya dengan background-size:cover, gambar background akan menyesuaikan dengan lebar layar. Dan keuntungannya menggunakan ini adalah dia akan tetap full width ketika resolusi layar berubah.

Kamu juga bisa menambahkan line berikut untuk membantu kamu memposisikan background sesuai kebutuhan

background-position:center;

Hasil akhirnya bisa dicek di sini. Dengan memahami konsep dari code tersebut, mudah-mudahan menjadi mudah untuk kita mengkombinasikan kebutuhan ketika membuat antar muka di web.

Penulis: Sutisna

Leave a Reply

Your email address will not be published. Required fields are marked *