Tidak bosan-bosannya saya menyapa sobat penggiat teknologi dimanapun berada, kembali lagi blog saya yang sederhana ini. Pada kesempatan kali ini saya akan membahas kembali tentang CSS, di
artikel sebelum kita telah mempraktekan cara membuat sebuah menu Dropdown yang sederhana. Tidak berbeda dengan tutorial sebelumnya, tutorial kali ini juga akan membahas tentang CSS yang sederhana yaitu cara membuat gambar background menjadi layar penuh / fullscreen. Hal yang paling sederhana dan mudah dalam membuat gambar background pada web adalah dengan menggunakan sintak HTML biasa yakni <body background="nama_gambarnya.jpg"> hh Dengan menggunakan CSS, gambar background yang kita inginkan bisa tampil layar penuh / fullscreen sesuai dengan ukuran orisinil yang terdapat pada gambar. Baiklah, langsung saja ini dia CSS-nya :
body {
</style>
</body> background: url(nama_gambarnya.jpg) berfungsi untuk mencari gambar yang dituju Membuat Gambar Background Fullscreen dengan CSS
seperti yang sudah kita ketahui bersama bahwa
<body> merupakan bagian badan/tubuh dari sebuah dokumen HTML yang berfungsi untuk meletakan segala elemen dan artikel didalamnya, dan sintak background=" "> ini digunakan untuk memberikan latar belakang yang bisa berupa warna maupun gambar, namun kelemahan dari sintak ini adalah tidak bisa menampilkan semua bagian gambar secara keseluruhan hanya sebagian saja. Ini merupakan contoh jika menggunakan sintak HTML biasa : Gambar yang akan digunakan (Full Size)
Saat diterapkan kedalam web, hanya terlihat sebagian saja
<html>
<head>
<title>Background Fullscreen dengan CSS</title>
<style type="text/css">
background: url(nama_gambarnya.jpg) no-repeat fixed;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
</head>
<body>
</html>
~~Penjelasan :
-webkit-background-size ini merupakan ukuran background untuk pengguna browser Google Chrome dan browser berbasis webkit lainnya.
-moz-background-size
ini merupakan ukuran background untuk pengguna browser Mozilla Firefox.
-o-background-size ini merupakan ukuran background untuk pengguna browser Opera.
background-size ukuran pada background
Berikut adalah hasil dari gambar background pada web yang menggunakan CSS :
Dengan menggunakan CSS, background menjadi Fullscreen |
Sekian tutorial yang saya berikan yakni membuat gambar background fullscreen dengan CSS, semoga bermanfaat dan dapat menambah pengetahuan sobat tentang pembuatan web.
- Tweet
- Share
- Share
- Share
About Muliana Insan W.
Saya hanyalah seorang Web Programmer junior dan Desainer Grafis junior yang mencoba memberikan pengetahuannya yang tidak seberapa kepada khalayak luas.
Pemasangan video pada sebuah background di web merupakan salah satu opsi mempercantik website. Berikut adalah source coda bagaimana membuat background vide pada website. Source code berikut merupakan source yang saya gunakan di berbagai project sistem informasi yang pernah saya buat. Anda dapat menggantinya dengan video yang anda inginkan di dalam folder video.
Silahkan lihat untuk preview :
Berikut adalah langkah pembuatannya :
1. Siapkan Video
Pada tutorial ini saya menyarankan untuk video dengan ukuran kecil seperti 2 atau 3 mb. Mengapa ? karena jika terlalu besar akan membuat loading halaman web anda semakin lambat. Video yang saya siapkan ini berdurasi selama beberapa detik saja.
2. Buat folder bernama video
Buatlah folder bernama video. Dan beri nama vodeo anda clip.mp4
Rekomendasi Resolusi adalah : 1280×720 px
3. Buat file index dengan source code sebagai berikut :
Buatlah file index.php dan sesuaikan nama folder dan file
<br><br> <video id="my-video" style="position:fixed; right: 0; top: 0; min-width:100%; z-index: -100; object-fit: cover;" class="video" loop muted> <source src="upload/clip.mp4" type="video/mp4"> <source src="upload/clip.ogv" type="video/ogg"> <source src="upload/clip.webm" type="video/webm"> </video><!-- /video --> <center> <div style='background:white; color:black; width:80%; text-align:center'> <br> Selamat Datang di SistemIT.com<br> <br> <br> Ini Adalah Contoh Halaman Website dengan Background Video <br> <br> </div> </center> <script> (function() { /** * Video element * @type {HTMLElement} */ var video = document.getElementById("my-video"); /** * Check if video can play, and play it */ video.addEventListener( "canplay", function() { video.play(); }); })(); </script>Bagaimana ? Gampang bukan. Silahkan mencoba.
Untuk pemesanan dan pembuatan aplikasi berbasis web silahkan hubungi kontak berikut :