Cara membuat background html full screen notepad

Question

Saat membuat sebuah website, hal yang selalu dilihat oleh visitor adalah desainnya. Desain yang bagus dan tentu saja menarik pasti akan mendapat pikiran yang baik dari visitor dan keuntungannya, visitor menjadi betah berada di website kita. Salah satu hal yang termasuk ke dalam desain adalah background, banyak website yang memilih background dengan warna polos. Namun, sekarang ini sudah banyak pula website dengan background yang full screen.

Table of Contents Show

Membuat Background Warna di html
Membuat Background Image di html
Apa HTML yang benar untuk memasukkan gambar latar belakang?
Apa itu background pada CSS?

Tentu mudah membuat background full screen, namun terkadang tata letaknya menjadi masalah tersendiri pada website. Bagaimana agar website memiliki background full screen? Mudah saja! Kita bisa gunakan atribut pada css yang bernama background-size.

Bagaimana penggunaannya? Cukup dengan sematkan script berikut pada file css :

body{background-image:url(green-aurora.jpg); background-size:cover}

Hanya seperti itu? Benarkah? Benar! Yang dibutuhkan untuk membuat background menjadi full screen adalah dengan background-size:cover.

Sekarang kita buat contoh websitenya. Ini contoh HTML-nya :

Background Size Cover Test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus urna orci, tristique pharetra massa eu, laoreet auctor velit. Nulla gravida arcu id risus posuere vehicula sit amet eu risus. Phasellus accumsan tristique consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque at semper augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas at tellus hendrerit lacus lacinia molestie. Proin nibh quam, porttitor eget elit vitae, lacinia luctus orci. Aenean rutrum nisl eget ante ullamcorper, at congue elit accumsan. Morbi nunc est, feugiat nec ultrices eget, consectetur vel eros. Nam non quam nibh. Phasellus eget condimentum nibh. Vestibulum molestie, purus nec condimentum euismod, odio felis ultrices est, eu ultrices magna nulla in nulla. Donec in purus sed erat dapibus semper.

Lalu, untuk CSS-nya buat seperti ini :

body{background-image:url(green-aurora.jpg); background-size:cover}
#test{padding:20px}
h1{text-align:center; color:#FFF}
p{margin-bottom:10px; color:#FFF}

Save. Dan selesai. Background kini telah menyesuaikan dengan layar. Meskipun di scroll, background akan tetap full screen. Mudah yaa? Semoga bermanfaat!

Kelasprogrammer.com – Halo Sahabat Programmer kali ini kita akan belajar tutorial dasar untuk cara menambahkan background di html. Background yang bisa kita buat adalah background dengan menggunakan warna (color) dan bisa juga menggunakan gambar (image).

Untuk menambahkan background di html maka perlu menggunakan style CSS (Cascading Style Sheet). Style ini dapat kita buat langsung didalam tag <head> pada dokumen htmlnya. atau kita membuat sebuah file sendiri dengan exntensi .css lalu kemudian tinggal kita panggil dari dalam tag <head> juga.

Pada contoh dibawah ini merupakan sintak html sederhana yang belum dibuat backgroundnya.

<!DOCTYPE html>
<html>
<head>
  <title>Membuat Background di html</title>
</head>
<body>
  <h1>Kelasprogrammer.com</h1>
  <p>Halaman ini dibuat tanpa menggunakan background.</p>
</body>
</html>

Seperti yang sudah saya sebutkan diatas kita perlu membuat style nya terlebih dahulu didalam tag <head> kemudian kita gunakan properti background-color untuk membuat background warna dan properti background-image untuk gambar.

Membuat Background Warna di html

Berdasarkan sintak html sederhana diatas akan coba kita modifikasi dengan cara menambahkan tag <style> didalam tag <head>

<style>
  body {
   background-color: lightblue;
  }
</style>

Style yang kita buat ada di selector body dengan properti yang dibuat adalah background-color dengan nilai (value) adalah lightblue. Artinya bahwa kita sedang menyatakan bahwa semua elemen yang berada didalam tag <body> akan di set warna backgroundnya menjadi lightblue.

Jika dilihat secara keseluruhan sintaknya menjadi seperti berikut:

<!DOCTYPE html>
<html>
<head>
 <title>Membuat Background di html</title>
 <style>
   body {
    background-color: lightblue;
   }
 </style>
</head>
<body>
<h1>Kelasprogrammer.com</h1>
<p>Halaman ini dibuat dengan warna background lightblue.</p>
</body>
</html>

Ketika dokumen html tersebut dijalankan, maka kita akan melihat warna background nya telah berubah menjadi lightblue.

Terdapat banyak sekali warna yang bisa kita buat di html. Baik menggunakan kode warna heksadesimal maupun kombinasi nilai dari RGB.

Silahkan kalian ketikan kata kunci ‘kode warna di html’ untuk melihat daftar warna yang bisa digunakan.

Membuat Background Image di html

Untuk membuat background image, maka kita gunakan properti background-image lalu kemudian dimasukan url image (gambar) didalam direktori yang tersimpan. Contoh lihat pada sintak dibawah ini:

body {
  background-image: url("gambar/white-desk.jpg");
}

sintak diatas kita membuat background image yang mengacu pada gambar dengan nama white-dek.jpg yang terdapat didalam folder gambar

Ketika saya coba jalankan dibrowser backgroundnya tampil belum sempurna, karena masih terdapat space dibagian bawah halaman. Hal ini dikarenakan ukuran gambar yang tidak cukup untuk memenuhi seluruh layar. Selain itu pada bagian kanan terdapat gambar yang di ulang (repeat) untuk memenuhi sisi kanan layar.

Untuk menangani hal tersebut maka kita perlu membuat properti berikut:

background-repeat untuk mengatur pengulangan background, jika kita tidak ingin gambarnya di ulang maka isikan nilai no-repeat pada properti tersebut.
background-size untuk mengatur ukuran background yang tampil. Agar dapat ditampilkan secara full screen maka gunakan nilai cover pada properti tersebut.

Artikel lainnya: Cara menampilkan gambar di html

Jadi untuk sintaknya kurang lebih seperti ini:

body {
   background-image: url("gambar/white-desk.jpg");
   background-repeat: no-repeat;
   background-size:cover
}

Ketika kita jalankan dibrowser maka hasilnya seperti pada gambar berikut:

Dapat kita lihat bahwa background gambarnya tidak lagi di ulang (repeat) dan background telah mengisi seluruh space pada layar browser.

Kekurangan dari teknik ini adalah gambar yang ditampilkan resolusinya akan kurang maksimal, karena gambar dipaksa untuk memenuhi seluruh space layar. Saran saya gunakan gambar dengan ukuran yang maksimal dan pas sesuai ukuran layar komputer dikomputer saya ukuran yang pas sekitar 1200x770px. Namun bisa jadi berbeda jika kalian menggunakan resolusi layar yang berbeda.

Kesimpulan

Sekian tutorial kali ini mengenai cara menambahkan background di html. dimana kita sudah mempelajari membuat background warna dan image. Intinya kita memerlukan style CSS untuk membuatnya di dalam dokumen html. Silahkan pelajari lebih lagi tentang html dan css pada menu tutorial di blog ini.

Apa HTML yang benar untuk memasukkan gambar latar belakang?

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 pada CSS?

CSS background-image digunakan untuk mengatur gambar latar belakang sebuah elemen HTML. Secara default, background gambar akan diulang (repeat) sehingga memenuhi seluruh elemen. Untuk cara penggunaanya silahkan ikuti contoh di bawah ini. Namun sebelumnya siapkan gambar yang akan dijadikan sebagai latar belakang.

kode html