Membuat Background Gambar Full dengan CSS

Website dengan gaya background menggunakan gambar full sangat sering kita jumpai. Hal itu dikarenakan dapat membuat kesan website lebih colorful dengan gambar yang bagus dan detail. Tentu hasilnya akan berujung pada traffic website kita, karena semakin nyaman website yang kita bangun tentu akan membuat pengunjung menjadi lebih nyaman berselancar di website kita. Karena background kita menggunakan gambar, maka carilah gambar dengan ukuran sedikit lebih besar dan dengan gambar yang cukup detail agar terlihat lebih mewah.

Lalu bagaimana cara membuatnya? Sesuai dengan artikel kali ini kita akan mempelajari bagaimana cara membuat background gambar full dengan CSS. Kalian bisa ikuti langkah-langkah berikut ini. Hal pertama yang harus dipersiapkan adalah tentu gambar yang ingin kita jadikan background. Kalian bebas mencari gambar digoogle namun dengan catatan dengan ukuran yang besar dan resolusinya juga harus besar agar gambar tidak pecah.

Kemudian langkah selanjutnya adalah membuat file kerangka dengan HTML. Kalian bisa ikuti contoh code dibawah ini.

gambar.html

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
    height: 100%;
    margin: 0;
}

.bg {
    /* nama gambarnya */
    background-image: url("NAMA GAMBAR KALIAN");

    /* tinggi gambar */
    height: 100%; 

    /* untuk mengatur posisi gambar */
    position: relative;
    opacity: 0.65;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}
</style>
</head>
<body>

<div class="bg">
	<div class="caption">
      <span class="border">FULL PAGE</span><br><br>
      <span class="border">BACKGROUND IMAGE</span>
    </div>
</div>

<p>ini adalah contoh menggunakan background gambar full</p>

</body>
</html>

Jika sudah kalian bisa simpan file tersebut dengan format html. Dan jangan lupa untuk menyesuaikan nama gambarnya sesuai dengan gambar pilihan kalian. Untuk melihat hasilnya kalian bisa buka file tersebut lewat browser, jika berhasil maka tampilanya akan seperti ini.

membuat-background-gambar-full-dengan-css-rangga-030717

Mudah bukan ?

Sekian pembahasan mengenai bagaimana cara membuat background gambar full dengan CSS. Semoga bermanfaat.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *