• Lihat Daftar Paket Kursus Aplikasi Berbasis Website KLIK TOMBOL INI

  • Blog

  • Cara Memasang Background Body Full Di HTML

    • Minggu, 28 Januari 2018 19:54:04
    • Author : Brian Abraham
    6653
    0

    Halo guys, pada kesempatan kali ini Jasa Pembuatan Website punya sedikit tips dan trik mengenai cara memasang background body full di html. Perlu kalian ketahui sebelumnya, untuk membuat gambar background css untuk Body html menjadi full mungkin sebagian dari kalian sering menggunakan property background-repeat: repeat; . Dan perlu kalian ketahui lagi sebelumnya, apabila gambar yang ingin di pasang pada Body lebih kecil ukuran resolusinya jika dibandingkan dengan ukuran resolusi element dari Body tersebut maka hasilnya akan jelek, dan gambar tersebut akan di ulang atau default-nya adalah repeat untuk background yang dipasang, meskipun bisa di set property backgroun-repeat tersebut menjadi no-repeat, namun permasalahan gambar tersebut belum selesai sampai disini.

    cara memasang background body full di html

    Karena gambar tersebut nantinya tetap belum bisa menutupi full element Body tersebut, dikarenakan resolusi ukuran panjang dan tinggi gambar lebih kecil dibanding element Body tersebut, tapi kalian tidak perlu khawatir, karena selain dengan metode property background-repeat tersebut, css menyediakan property lain yang berguna untuk membuat gambar menjadi full saat dipasang disuatu element, meskipun gambar tersebut lebih kecil ukurannya. Mungkin sebagian dari kalian sudah tahu property background-size, dimana property css tersebut berfungsi untuk menjadikan background yang dipasang di suatu element atau selektor menjadi full tanpa mengulang gambar tersebut, seperti halnya pada fungsi dari property background-repeat. Dan untuk penggunaan property tersebut, masing-masing browser berbeda-beda property yang dapat digunakan, berikut kode propertynya : 
    -webkit-background-size: cover;  /* support chrome dan Internet Explorer */
-moz-background-size: cover;  /* support firefox */
-o-background-size: cover; /* support opera mini */
background-size: cover;  /* support firefox dan chrome */
    Seperti yang kalian lihat pada property tersebut, dimana masing-masing browser memiliki property yang berbeda, namun untuk amannya lebih baik disertakan ke empat property tersebut, namun nantinya akan tetap salah satunya yang akan dijalankan oleh browser. Unhtuk membuatnya kalian bisa ikuti tahapan dibawah ini :
    • Kalian buat terlebih dahulu satu buah file dengan nama index.html
    • Selanjutnya ketikan kode seperti berikut :
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara Memasang Background Body Full Di HTML</title>
</head>
<style>
#main-bg{
  width: 100%;
  height: 350px;
  margin-bottom: 1.9em;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(http://farm5.staticflickr.com/4019/4558060963_5ddaa11406_b.jpg);
  	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
</style>
<body>
<div id="main-bg"></div>
</body>
</html>
    • Jika sudah save dan lihat hasilnya di masing-masing browser kalian.

    Sampai disini saya harap kalian sudah paham, dan apabila mengikuti tahapan yang saya berikan dengan benar maka sekarang kalian sudah berhasil mengikuti contoh cara memasang background body full di html.

    Sampai disini tips dan trik yang Jasa Pembuatan Website jelaskan mengenai cara memasang background body full di html, jangan sungkan untuk berkomentar di kotak komentar yang saya sediakan di bawah ini.



    - Apakah kalian sedang bingung mencari tempat khursus website terbaik di area jakarta, bogor, depok,
      tangerang dan bekasi ?
    - Apakah kalian seorang mahasiswa yang ingin menjadi Programmer Web Professional ?
    - Apakah kalian seorang karyawan diperusahaan yang ingin upgrade skill ke bidang Applikasi Web ?

    Kunjungi link dibawah ini :
    Tempat Khursus Website Terbaik Di Dumet School

    ~ Happy Coding Guys ~

    Average rating 3.5 of 4 vote

  • KOMENTAR

  • Kirim Komentar

    Untuk mengirim komentar, lengkapi formulir dibawah ini.