Cara menggunakan kode html background warna

Question

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).

Table of Contents Show

Membuat Background Warna di html
Membuat Background Image di html
Bagaimana cara memberi warna pada background?
Bagaimana cara mengubah warna background halaman web?
Perintah apa yang diberikan untuk menambahkan background warna?
RGB 255 250 205 warna apakah ini?

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.

Bagaimana cara memberi warna pada background?

Menambahkan atau mengubah warna latar belakang.

Masuk ke Desain > Warna Halaman..

Pilih warna yang Anda inginkan di bawah Warna Tema atau Warna Standar. Jika Anda tidak melihat warna yang Anda inginkan, pilih Warna Lainnya, lalu pilih warna dari kotak Warna..

Bagaimana cara mengubah warna background halaman web?

Cara Mengubah Warna Background Website WordPress.

Pilih menu Appearance > Customize..

Pilih menu Colors (Jika tidak ada, bisa cari background, background color, dll).

Klik tulisan background color (Jika tidak ada juga, coba cara yang berikutnya).

Pilih warnanya..

Klik tombol Publish..

Perintah apa yang diberikan untuk menambahkan background warna?

Perintah BODY adalah perintah untuk membuat warna latar belakang pada layar, mengubah warna link, mengubah warna dasar link, menampilkan pesan ketika halaman ditutup, dan lain-lain sesuai dengan atribut yang diberikan.