Membuat Background Fullscreen dengan CSS

Pada postingan sebelumnya kita telah mengetahui cara kerja html dengan membuat sebuah tabel sederhana (Membuat Tabel dengan HTML), dimulai dari penyusunan strukturnya hingga menampilkan hasil outputnya. Tapi yang menjadi pertanyaan, apakah cukup mempelajari html saja ? jawabannya tidak, karena jika kita hanya mempelajari html saja, itu sama saja kita hanya mempelajari bagaimana membuat kerangkanya dalam suatu komponen website.
Sebuah kerangka dalam komponen website, pasti membutuhkan desain pada propertinya agar tampilan dalam sebuah website itu menjadi bagus dan rapih sehingga terlihat indah bagi pengunjung (visitor). istilah tersebut dinamakan CSS. CSS merupakan singkatan dari Cascading Style Sheet yaitu dokumen web yang berfungsi mengatur elemen HTML dengan berbagai property yang tersedia sehingga dapat menampilkan gaya (style) sesuai keinginan.
HTML tidak bisa dipisahkan dengan CSS, karena segala syntax baik itu class (.) maupun id (#) dapat dipanggil dengan css. Oleh karena itu, pada kali ini saya akan membahas bagaimana membuat background menjadi fullscreen (satu layar penuh dan tanpa pengulangan gambar) dengan CSS. Mari langsung dipraktekkan dan ikuti perintahnya.

Sekilas Info


  • Sebelum mempraktekkan tutorial yang akan dibahas, pastikan anda telah membuka text editor. Saya menyarankan anda menggunakan Visual Studio Code, karena sangat user friendly.
  • Buat folder baru untuk mempraktekkan tutorial ini, misal Belajar HTML, belajarkoding dll (bebas sesuai keinginan).
    Hal ini bertujuan agar kita dapat meletakkan file yang dipraktekkan sehingga terlihat rapih dan terstruktur serta demi kenyamanan dalam mempelajari pemrograman.
  • Praktekkan setiap baris kodenya, jangan dicopas.
    Hal ini bertujuan agar teman-teman dapat melatih kemampuan mengetik koding dan memahami setiap fungsi/kegunaan dari koding.

  1. Buatlah dua buah file, yaitu index2.html dan style.css, dengan cari pilih menu file > New File (Ctrl+N) > Ctrl+S, kemudian file diberinama sesuai keinginan (dicetak tebal).
  2. Sediakan gambar yang akan ditampilkan (bebas), disini saya menggunakan gambar gunung bromo yang akan dijadikan property css. untuk mendownload gambarnya ada di link berikut. bromo
  3. Buat struktur index2.html seperti ini dan simpan (ctrl+s).
  4. Buat property style.css seperti ini, lalu simpan (ctrl+s).
  5. Buka index2.html melalui web browser, maka hasil outputnya yang tampil seperti ini.

Penjelasan Tutorial


HTML
Nama Tag Attribut Keterangan / Fungsi
<link> rel=”stylesheet” href=”style.css” mengincludekan (menempatkan) file style.css.
Fungsinya adalah untuk menampatkan link berupa file css eksternal (tidak digabung pada satu file html (terpisah)).
<body> class=”img” Struktur html yang berfungsi untuk menaruh konten/isi yang memiliki class img
<h3> style=”text-align:center” Menghasilkan judul huruf yang besar dan tebal dengan ukuran sedang
<p> id=”teks” Membuat paragraf pada teks yang memiliki id teks
CSS
Nama Properti Keterangan / Fungsi
background-color memberi warna pada background suatu objek
color memberi warna pada teks
width membuat ukuran panjang pada suatu objek
height membuat ukuran lebar pada suatu objek
padding mengatur jarak box dengan konten yang berada di dalamnya (teks)
margin mengatur jarak box dari elemen disekitar box
Jadi lebih ciamik tampilannya bukan? cocok untuk yang ingin menghias tampilan website anda dan bisa anda modifikasi lebih lanjut sesuai keinginan. Dan masih banyak lagi yang akan dipelajari pada CSS ini dan akan terus berlanjut, simak terus dan ikuti tutorial selanjutnya. jika masih ada yang belum berhasil mempraktekkannya, kalian dapat melihat tutorial di video berikut.
Leave a Reply

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