hallo semuanya balik lagi pada tutorial dumet school, pada tutorial kali ini saya akan membahas fungsi dari properties background-size:cover pada CSS, fungsi dari background-size sendiri adalah untuk mengatur ukuran gambar yang akan di jadikan background pada bagian website kita, oke dari pada bingung kita coba langsung saja praktekan, silahkan buat sebuah file dan ketikan script berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>background size cover</title> </head> <body> <div> </div> </body> </html> |
Saya membuat sebuah div yang akan saya atur background nantinya, oke jika sudah coba tambahkan script CSS berikut :
|
1 2 3 4 |
<style> *{margin:0;padding:0} div {background:url("blog_05-570x320.png"); width:100%; height:400px;} </style> |
Saya mengatur div dengan sebuah gambar yang sudah saya siapkan sebelumnya, nah jika sudah disave maka hasilnya akan seperti berikut :
Hasilnya gambar akan berulang karna dimensi gambar yang tidak selebar width yang kita berikan, sekarang coba tambahkan CSS berikut pada pengaturan div nya:
|
1 |
background-size:cover |
Maka hasilnya gambar tersebut akan mengcover area dari div tersebut.
Oke teman-teman sekian dulu tutorial kali ini semoga bermanfaat.