Warna latar (background color) merupakan warna di belakang teks yang diterapkan pada elemen HTML. Warna latar pada CSS akan menempati keseluruhan bagian elemen HTML yaitu mulai dari konten itu sendiri, padding sampai dengan wilayah border namun tidak termasuk margin.
Warna latar elemen HTML dapat diibaratkan seperti sebuah papan tulis yang biasa digunakan sebagai sarana untuk menulis. Jika warna papan tersebut adalah putih maka jika di dalam CSS warna background-nya adalah putih. Kemudian warna depan (color) diibaratkan sebagai warna spidol-nya, yang digunakan untuk mewarnai teks dan tulisannya.
Warna latar (background color) pada suatu halaman HTML merupakan aspek yang cukup penting. Anda dapat mencoba dengan berbagai warna yang menarik mulai dari warna standart HTML, hexadesimal, RGB(A) maupun HSL(A) dalam menata halaman HTML. Secara default, halaman HTML (tag body) memiliki warna putih sebagai warna latar-nya dan warna hitam sebagai warna teksnya. CSS dapat membantu dalam mengubah warna standart tersebut menjadi warna baru yang jauh lebih menarik sesuai dengan pilihan warna dan tema pada halaman website tersebut.
Warna latar pada tag body memiliki warna putih secara default. Sedangkan pada seluruh elemen HTML lainnya memiliki warna default transparent (RGBA(0,0,0,0)). CSS dapat mengubah warna tersebut dengan warna baru sesuai dengan keperluan. CSS menyediakan properti background-color yang berfungsi untuk mengubah warna background elemen. Anda dapat memanggilnya dengan background saja sebagai jalan pintas (shorthand) namun nilainya harus diisi dengan nilai pada properti background-color.
Penulisan properti :
background-color: color | transparent | inherit;
Nilai color merupakan nilai dalam bentuk satuan warna. Anda dapat mengunakan nilai berupa nama warna standart HTML, kode warna hexadesimal, kode RGB(A) maupun kode HSL(A). Nilai transparent merupakan nilai dalam bentuk transparent (tembus pandang). Semua elemen HTML memiliki nilai warna transparent sebagai warna defaultnya kecuali tag <body>. Nilai inherit merupakan nilai yang diturunkan dari elemen induknya.
Sebagai contoh misalnya :
p {background-color: red;}
p {background-color: rgb(255,69,0);}
p {background-color: #b8880b;}
p {background-color: transparent;}
Berikut contoh penggunaan warna latar dengan beberapa nilai warna :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<title>Background Color CSS</title>
<style>
p{
color: #fff;
padding:10px;
margin: 10px;
}
</style>
</head>
<body>
<p style="background-color: red;">Paragraf ini menggunakan background-color <b>red</b></p>
<p style="background-color: purple;">Paragraf ini menggunakan background-color <b>purple</b></p>
<p style="background-color: darkgreen;">Paragraf ini menggunakan background-color <b>darkgreen</b></p>
<p style="background-color: #00008b;">Paragraf ini menggunakan background-color <b>#00008b</b></p>
<p style="background-color: #ff8c00;">Paragraf ini menggunakan background-color <b>#ff8c00</b></p>
<p style="background-color: RGB(15,255,0);">Paragraf ini menggunakan background-color <b>RGB(15,255,0)</b></p>
<p style="background-color: RGB(75,0,130);">Paragraf ini menggunakan background-color <b>RGB(75,0,130)</b></p>
<p style="background-color: HSL(240,100%,50%);">Paragraf ini menggunakan background-color <b>HSL(240,100%,50%)</b></p>
<p style="background-color: HSL(93, 80%, 45%);">Paragraf ini menggunakan background-color <b>HSL(93, 80%, 45%)</b></p>
<p style="background-color: RGBA(255, 69, 0, 0.5);">Paragraf ini menggunakan background-color <b>RGBA(255, 69, 0, 0.5)</b></p>
<p style="background-color: RGBA(240, 15, 255, 0.75);">Paragraf ini menggunakan background-color <b>RGBA(240, 15, 255, 0.75)</b></p>
</body>
</html>
Hasil Script :
Paragraf ini menggunakan background-color red
Paragraf ini menggunakan background-color purple
Paragraf ini menggunakan background-color darkgreen
Paragraf ini menggunakan background-color #00008b
Paragraf ini menggunakan background-color #ff8c00
Paragraf ini menggunakan background-color RGB(15,255,0)
Paragraf ini menggunakan background-color RGB(75,0,130)
Paragraf ini menggunakan background-color HSL(240,100%,50%)
Paragraf ini menggunakan background-color HSL(93, 80%, 45%)
Paragraf ini menggunakan background-color RGBA(255, 69, 0, 0.5)
Paragraf ini menggunakan background-color RGBA(240, 15, 255, 0.75)
Catatan : Anda dapat menggunakan properti background-color dan properti color secara bersamaan dalam menata halaman HTML. Namun penataan warna latar (background) dengan warna teks harus kontras dengan memilih warna yang berkebalikan. Misalnya warna belakang (background) memiliki warna gelap sedangkan warna teks-nya memiliki warna terang sehingga teks tersebut mudah dibaca oleh pengguna.
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
