Cara Membuat Background Image Mengikuti Lebar Resolusi Monitor

02/07/2015    Faizal Rafik    66489    Website

Hallo teman-teman DUMET School ketemu lagi dengan saya. Sudah lama nih saya tidak sharing tutorial lagi dengan teman-teman semuanya. Kali ini saya akan sharing tentang bagaimana caranya membuat Background Image mengikuti lebar resolusi monitor. Sebenaranya untuk membuat background image mengikuti lebar resolusi monitor banyak sekali cara yang dapat teman-teman gunakan yatiu teman-teman bisa gunakan property CSS 3 background-size dengan nilai cover. Nah disini saya akan menggunakan Teknik yang sedikit berbeda yaitu saya akan menggunakan property CSS 3 position: fixied;. Untuk lebih jelasnya kita akan langsung mempraktekkannya saja ya temen-teman.

Pertama teman-teman bisa membuat struktur HTML nya seperti gambar di bawah ini :

Bisa kalian lihat pada HTML di atas, saya akan memanggil background image tersebut pada tag HTML div yang sudah saya beri class dengan nama coverBg. Selanjutnya CSS nya seperti gambar di bawah ini :

Perhatikan pada CSS di atas kalian harus menambahkan property CSS 3 position: relative di dalam selector .wrapper atau di bagian div yang membungkus seluruh bagian yang ada di dalam website dan di dalam selector .coverBg kalian bisa ketikan property-property yang ada di atas.

Nah untuk hasilnya kalian bisa lihat di link Demo di bawah ini. Dan buat teman-teman yang ingin mendownload scriptnya teman-teman bisa mengklik link Download di bawah ini.

Demo | Download

No data.