Membuat Background Gambar secara Full Screen
Assalamualaikum Warrahmatullahi Wabarakaatuh
Kali ini saya akan membahas mengenai pembuatan background atau latar belakang secara full screen.
.
.
Penyisipan latar belakang gambar secara umum dapat dilakukan dengan menuliskan baris kode <body background="namafile.esktensifile"> hanya saja cara ini akan membuat gambar yang ditampilkan tidak penuh pada halaman website dan akan mengikuti dimensi asli gambar. Hal ini dikarenakan tidak adanya pengaturan ukuran gambar pada tag body.
Hasil penyisipan gambar :
Dengan menggunakan sedikit baris kode CSS atau Cascading Style Sheet, gambar latar belakang akan menjadi full dan fleksibel. Berikut baris kode yang perlu disisipkan :
<html>
<head>
<title> Full Background </title>
<style>
body {
background: url(kk.jpg) no-repeat fixed;
background-size: 100% 100%;
}
</style>
</head>
<body>
Kali ini saya akan membahas mengenai pembuatan background atau latar belakang secara full screen.
.
.
Penyisipan latar belakang gambar secara umum dapat dilakukan dengan menuliskan baris kode <body background="namafile.esktensifile"> hanya saja cara ini akan membuat gambar yang ditampilkan tidak penuh pada halaman website dan akan mengikuti dimensi asli gambar. Hal ini dikarenakan tidak adanya pengaturan ukuran gambar pada tag body.
Hasil penyisipan gambar :
 |
| Hasil penyisipan gambar yang hanya terlihat sebagian |
 |
| Gambar asli |
<html>
<head>
<title> Full Background </title>
<style>
body {
background: url(kk.jpg) no-repeat fixed;
background-size: 100% 100%;
}
</style>
</head>
<body>
</body>
</html>
Hasil penyisipan gambar setelah ditambah baris kode CSS :
Penjelasan pada tag style :
Waalaikumussalam Warahmatullahi Wabarakaatuh
</html>
Hasil penyisipan gambar setelah ditambah baris kode CSS :
 |
| Background full screen |
Penjelasan pada tag style :
- body : merupakan induk untuk memanggil tag <body>
- background :url() : digunakan untuk mencari dan menampilkan gambar yang dipilih
- no-repeat : menandakan gambar atau latar belakang tidak melakukan pengulangan
- fixed : menandakan gambar atau latar belakang tidak berubah-ubah posisi
- background-size : merupakan baris kode untuk ukuran background; 100% pada sebelah kiri untuk ukuran width/lebar dan 100% pada sebelah kanan untuk ukuran height/tinggi
Waalaikumussalam Warahmatullahi Wabarakaatuh
Comments
Post a Comment