CSS - Penggunaan Background

Background atau latar belakang merupakan elemen yang bisa membuat tampilan laman web semakin menarik dengan memberikan dekorasi visual terhadap sebuah elemen, bisa berupa gambar, warna, atau penggabungan keduanya.

Anda bisa mengatur properti latar belakang elemen berikut:

Property background-color.

Propertynya kita bisa memberikan value warna dalam nama warna, code warna atau rgb dari latar belakang suatu elemen.

Penambahan warna ini dilakukan dengan menggunakan properti background atau background-color yang bisa anda digunakan secara bebas.

Contoh:

<html>
   <head>
   <body>
      <p style = "background-color:yellow;">
      Text ini berlatar belakang kuning.</p>
   </body>
   </head>
<html>

Penambahan warna juga bisa dengan menggunakan code heksa atau rgb

<html>
   <head>
   <body>
      <p style = "background-color:#FFFFOO;">
      Text ini berlatar belakang kuning.</p>
   </body>
   </head>
<html>

Jika menggunakan CSS maka contohnya sebagai berikut: Buat file style.css

body{
background-color: yellow;
color: white;
}

Maka cara manggil di file html-nya:

<!DOCTYPE html>
<html>
<head>
<title>Merubah warna background dengan warna kuning pakai CSS </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Tutorial mengubah warna background dengan CSS</h1>

</body>

Maka hasilnya adalah Tulisan berwarna putih dengan latar belakang yellow

Property background-image.

Seperti penambahan warna latar, penambahan gambar latar belakang juga dilakukan dengan menggunakan dua properti, yaitu background dan background-image. Untuk value yang diisikan untuk properti ini ialah url dari gambar, relatif terhadap file CSS, sama seperti pada penambahan font.

Pada kasus ini anda bisa menyediakan sebuah gambar yang akan dijadikan gambar latar belakang, satu folder dengan file html dan css. Misal nama file gambarnya, backgroundnama1.png

Maka file style.css:

body{
background: url(' backgroundnama1.png');
color: #fff;
}

Cara manggil di file htmlnya

<html>
<head>
<title>Membuat background dengan gambar</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Membuat background gambar dengan CSS</h1>

</body>
</html>