Cara Membuat Background Full Screen – HTML + CSS

Cara Membuat Background Full Screen - HTML + CSS

Pada tutorial ini kita akan belajar cara membuat background full screen menggunakan HTML dan CSS. Untuk memulai mengikuti tutorial ini siapkan sebuah gambar yang akan digunakan sebagai background. Gambar yang digunakan memiliki ukuran yang cukup besar namun jangan juga terlalu besar. Sebab apabila gambar yang kamu gunakan sebagai background memiliki ukuran yang kecil maka akan background akan pecah apabila ditampilkan ditampilkan ukuran layar besar. Dan apabila menggunakan ukuran gambar yang besar maka akan membuat website menjadi lebih berat, karena memerlukan download gambar terlebih dahulu. Terutama apabila website yang ingin dijadikan background full screen sudah online.

Pada contoh ini saya menggunakan gambar dengan nama background.jpg yang memiliki ukuran panjang 1400px dan lebar 788px. Dan gambar tersebut saya simpan didalam folder bernama background-full, yang nantinya folder ini sebagai folder tempat menyimpan file HTML juga.

Gambar Contoh File Background

Saya harap sebelum mengikuti tutorial ini kamu minimal sudah sedikit paham dengan HTML dan CSS. Supaya lebih mudah memahami tutorial ini.

Selanjutnya buka code editor kamu, disini saya menggunakan notepad++. Kemudian klik New dan tulis kode HTML dan CSS dibawah ini :

Setelah kode diatas selesai ditulis, selanjutnya simpan dengan nama index.html. Dan disimpan kedalam folder yang sama dengan file background.jpd, yaitu pada folder background-full.

Contoh Gambar File index.html Disimpan

Selanjutnya jalankan file index.html dengan cara double klik pada file tersebut. Apabila dengan cara double klik tidak tampil pada browser kamu dapat membukanya dengan cara buka browser dan tarik file index.html kedalam browser yang terbuka (drag drop). Maka akan tampil seperti gambar dibawah.

Gambar Hasil Membuat Background Full Screen - HTML + CSS

Penjelasan kode

Yang perlu saya jelaskan pada kode disini yaitu pada kode CSS saja. Pada baris nomor 6 terdapat kode body{, ini merupakan selector css, selector tersebut memilih tag HTML body. Pada baris nomor 7 terdapat kode background-image:url(background.jpg);. Maksud dari kode CSS tersebut yaitu mengatur gambar background dengan gambar yang bernama background.jpg (gambar yang kita siapkan sebelumnya).

Kemudian pada baris nomor 8 terdapat kode background-size:cover;, maksud dari kode CSS tersebut mengatur ukuran background agar sesuai dengan ukuran layar yang menampilkan web tersebut. Dan pada baris nomor 9 terdapat kode background-attachment: fixed;, maksud dari kode tersebut apabila konten pada website panjang dan bisa discroll. Maka yang discroll hanya kontennya saja, dan gambar background tidak ikut discroll (gambar tetap diam).

Selanjutnya pada baris nomor 11 terdapat kode CSS p{, kode tersebut merupakan selector untuk tag HTML paragraf. Dan pada baris nomor 12 terdapat kode color:white;, yang maksudnya merubah warna font (tulisan) menjadi putih. Karena background saya memiliki warna yang cukup gelap agar tulisan mudah dibaca saya rubah warna hurufnya menjadi putih. Pada warna huruf ini tentunya dapat kamu sesuaikan dengan background yang kamu gunakan.

Saya kira cukup jelas untuk penjelasan cara membuat background full screen menggunakan HTML dan CSS. Apabila kamu memiliki pertanyaan seputar seri ini silakan tanyakan pada kolom komentar dibawah ini.


Kolom Komentar

Related Post