Membuat background di php

Membuat Gambar Background Fullscreen dengan CSS

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.

Table of Contents Show

Membuat Gambar Background Fullscreen dengan CSS
About Muliana Insan W.
1. Siapkan Video
2. Buat folder bernama video
3. Buat file index dengan source code sebagai berikut :
Tinggalkan Komentar Anda
Apa tag HTML yang tepat untuk menambahkan warna background?
Bagaimana cara untuk memberi background berupa gambar pada HTML?
Apa itu background
Apa nama class yang dapat kita gunakan untuk mengubah warna background menjadi warna utama pada bootstrap 5?

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
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

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 :


<!DOCTYPE html>

<html>

<head>

<title>Background Fullscreen dengan CSS</title>

<style type="text/css">
body {

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%;

}

</style>

</head>

<body>

</body>

</html>

~~Penjelasan :

background: url(nama_gambarnya.jpg) berfungsi untuk mencari gambar yang dituju
-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.

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 :

Tinggalkan Komentar Anda

Apa tag HTML yang tepat untuk menambahkan warna background?

Untuk mengatur warna latar belakang dalam HTML, gunakan atribut style. Atribut style menentukan gaya sebaris untuk sebuah elemen. Atribut ini digunakan dengan tag HTML <body>, dengan properti CSS background-color.

Bagaimana cara untuk memberi background berupa gambar pada HTML?

Tikkan <div style="background-image: url('[image url]');"> di baris berikutnya. Inilah label HTML untuk menambahkan gambar latar belakang pada halaman web. Ganti "[image url]" dengan lokasi URL asli dari gambar yang diinginkan.

Apa itu background

background-image adalah teknik pada css untuk menampilkan gambar menjadi latar belakang alias background, baik itu pattern maupun gambar ukuran penuh.

Apa nama class yang dapat kita gunakan untuk mengubah warna background menjadi warna utama pada bootstrap 5?

Untuk mengubah warna latar belakang, kita menggunakan kelas bg. Sedangkan untuk mengubah warna teks, kita menggunakan kelas text. Sebagai contoh, kita tambahkan kelas text-primary.