Cara Membuat Background Image Mengikuti Lebar Resolusi Monitor

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

2 Juli 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat