Saat membuat sebuah website, hal yang selalu dilihat oleh visitor adalah desainnya. Desain yang bagus dan tentu saja menarik pasti akan mendapat pikiran yang baik dari visitor dan keuntungannya, visitor menjadi betah berada di website kita. Salah satu hal yang termasuk ke dalam desain adalah background, banyak website yang memilih background dengan warna polos. Namun, sekarang ini sudah banyak pula website dengan background yang full screen.
Tentu mudah membuat background full screen, namun terkadang tata letaknya menjadi masalah tersendiri pada website. Bagaimana agar website memiliki background full screen? Mudah saja! Kita bisa gunakan atribut pada css yang bernama
background-size.
Bagaimana penggunaannya? Cukup dengan sematkan script berikut pada file css :
body{background-image:url(green-aurora.jpg); background-size:cover}
Hanya seperti itu? Benarkah? Benar! Yang dibutuhkan untuk membuat background menjadi full screen adalah dengan
background-size:cover.
Sekarang kita buat contoh websitenya. Ini contoh HTML-nya :
<div id="test">
<h1>Background Size Cover Test</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> buat sebanyak mungkin -->
</div>
Lalu, untuk CSS-nya buat seperti ini :
body{background-image:url(green-aurora.jpg); background-size:cover}
#test{padding:20px}
h1{text-align:center; color:#FFF}
p{margin-bottom:10px; color:#FFF}
Save. Dan selesai. Background kini telah menyesuaikan dengan layar. Meskipun di scroll, background akan tetap full screen. Mudah yaa? Semoga bermanfaat!
ConversionConversion EmoticonEmoticon