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.
Baca juga : Cara membuat tabel di html
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.