CSS dapat digunakan untuk mendefinisikan efek yang terjadi pada latar belakang dan elemennya. CSS properti yang digunakan untuk mengatur efek latar belakang, yaitu :
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

1. Warna Latar Belakang

Properti background-color dapat digunakan untuk menentukan elemen warna latar belakang.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color: #ffcccc;
}
</style>
</head>
<body>
<h1>HELLO WORLD</h1>
</body>
</html>

Mengatur Warna Latar Belakang

Untuk menentukan warna pada CSS, dapat dilakukan dengan beberapa cara, yaitu :
  • Nilai HEXADESIMAL, contoh "#ffcccc"
  • Nilai RGB, contoh "rgb(255,0,0)"
  • Namai warna, contoh "red"

2. Gambar Latar Belakang

Properti latar belakang selain dengan warna, dapat juga menggunakan gambar. Secara default, gambar diulang sehingga meliputi seluruh elemen. Gambar latar belakang untuk sebuah halaman dapat diatur seperti berikut :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-image: url(image.jpg);
}
</style>
</head>
<body>
<h1>LOREM IPSUM</h1>
<p>dolor sit amet, consectetur adipisicing elit, sed do              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Mengatur Latar Belakang Halaman dengan Gambar