Cara Membuat Background Website Menjadi Fullscreen dengan CSS – Siapa yang lagi belajar HTML dan CSS? Nah, pasti kamu pernah kebingungan dalam membuat background di website dengan menggunakan gambar, bukan? Terlebih lagi, jika gambar yang kamu inginkan ini menjadi full screen.

Tapi, kamu bisa tenang. Karena ajaib dan kerennya CSS, dia memiliki banyak kode untuk membuat tampilan website kamu menjadi lebih cantik dan menarik. Salah satunya agar background website menjadi full screen. Kamu bisa coba langsung praktikkan saja ya!

Buat file HTML dan ketik kodenya seperti berikut:

<div id="test">
    <h1>This is The Title</h1>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus urna orci, tristique pharetra massa eu, laoreet auctor velit. Nulla gravida arcu id risus posuere vehicula sit amet eu risus. Phasellus accumsan tristique consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque at semper augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas at tellus hendrerit lacus lacinia molestie. Proin nibh quam, porttitor eget elit vitae, lacinia luctus orci. Aenean rutrum nisl eget ante ullamcorper, at congue elit accumsan. Morbi nunc est, feugiat nec ultrices eget, consectetur vel eros. Nam non quam nibh. Phasellus eget condimentum nibh. Vestibulum molestie, purus nec condimentum euismod, odio felis ultrices est, eu ultrices magna nulla in nulla. Donec in purus sed erat dapibus semper.</p>
    <!-- <p>...........</p> bisa coba diisi sebanyak mungkin -->
</div>

Buat kode CSS-nya seperti berikut ini:

body{background-image:url(aurora.jpg); background-size:cover}
#test{padding:20px}
h1{text-align:center; color:#FFF}
p{margin-bottom:10px; color:#FFF}

Note:

  • Pastikan terlebih dahulu gambar dan file HTML-nya berada di satu folder yang  sama ya!
  • Gunakan gambar yang memiliki kualitas bagus agar background gambar tidak pecah.

Jika sudah, kamu bisa langsung save, dan lihat hasilnya. Background kamu akan menjadi fullscreen. Untuk mengetesnya, kamu bisa coba untuk mengecilkan layar sambil melihat backgroundnya ya! Hasilnya pasti akan tetap fullscreen tanpa ada patahan atau sambungan gambar.

background website fullscreen

Jadi, kunci untuk membuat background website fullscreen adalah dengan menggunakan

background-size:cover

Jika kamu mencoba untuk menghapus background-size:cover, kamu akan melihat perubahan yaitu background akan menjadi sesuai dengan ukurannya. Terlihat dengan adanya sambungan gambar ini ya:

background website fullscreen

Dan jika kamu kecilkan layarnya, kamu akan melihat background berbentuk tile, seperti ini:

background website fullscreen

Bagaimana? Apa sudah paham dengan Cara Membuat Background Website Menjadi Fullscreen dengan CSS ini?  Semoga dengan adanya artikel ini, bisa membantu kamu yang sedang belajar dan kebingungan dalam membuat background website fullscreen ya!

Semoga bermanfaat 🙂