Senin, 12 November 2018

Cara Membuat Gambar Background Fullscreen Dengan Css

Penulis Paiton tio Diterbitkan 11/12/2018 01:39:00 AM

Tags

Tidak bosan-bosannya saya menyapa sobat pengiat 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">
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.