properti latar belakang CSS digunakan untuk mendefinisikan efek latar belakang dari suatu elemen.

properti CSS digunakan untuk efek latar belakang:

* Latar belakang warna
* Gambar-background
* Latar belakang-ulangi
* Latar belakang-lampiran
* Latar belakang-posisi

Warna Latar Belakang

Properti background-color menentukan warna latar belakang suatu elemen.

Warna latar belakang halaman didefinisikan di tubuh pemilih:
Contoh
body (background-color: # b0c4de;)

Lihat Contoh

Warna latar belakang dapat ditentukan oleh:

* Nama - nama warna, seperti "merah"
* RGB - nilai RGB, seperti "rgb (255,0,0)"
* Hex - nilai hex, seperti "# FF0000"

Pada contoh di bawah ini, h1, p, dan elemen div memiliki warna latar belakang yang berbeda:
Contoh
h1 (background-color: # 6495ed;)
p (background-color: # e0ffff;)
div (background-color: # b0c4de;)

Lihat Contoh

Latar Belakang Gambar

Properti background-image menentukan gambar yang akan digunakan sebagai latar belakang suatu elemen.

Secara default, gambar akan diulang sehingga mencakup seluruh elemen.

Gambar latar belakang untuk halaman dapat diatur seperti ini:
Contoh
body (background-image: url ('paper.gif');)

Lihat Contoh

Di bawah ini adalah contoh dari kombinasi buruk teks dan gambar latar belakang. Teks ini hampir tidak dapat dibaca:
Contoh
body (background-image: url ('bgdesert.jpg');)

Lihat Contoh

Latar Belakang Gambar - Ulangi Horisontal atau Vertikal

Secara default, properti latar belakang-ulang gambar gambar secara horisontal dan vertikal.

Beberapa gambar harus diulang hanya horizontal atau vertikal, atau mereka akan tampak aneh, seperti ini:
Contoh
body {background-image:url('bgdesert.jpg');}

Lihat Contoh

Jika gambar berulang-ulang hanya horisontal (mengulang-x), latar belakang akan terlihat lebih baik:
Contoh
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Liahat Contoh

Latar Belakang Gambar - Atur posisi dan tidak mengulang-

Catatan Bila menggunakan gambar latar belakang, gunakan gambar yang tidak mengganggu teks.

Menampilkan gambar hanya sekali ditetapkan oleh properti latar belakang-ulangi:
Contoh
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

Lihat Contoh

Dalam contoh di atas, gambar latar belakang ditampilkan di tempat yang sama seperti teks. Kami ingin mengubah posisi gambar, sehingga tidak mengganggu terlalu banyak teks.

Posisi gambar yang ditetapkan oleh properti latar belakang-posisi:
Contoh
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

Lihat Contoh

Latar Belakang - Singkatan properti

Seperti yang dapat Anda lihat dari contoh di atas, ada properti yang harus dipertimbangkan ketika berhadapan dengan latar belakang.

Untuk mempersingkat kode, juga mungkin untuk menentukan semua properti di sebuah properti tunggal. Ini disebut sebuah properti singkat.

Properti singkat untuk latar belakang hanya "latar belakang":
Contoh
body (background: # FFFFFF url ('img_tree.png') tidak mengulang-kanan atas;)

Lihat Contoh

Bila menggunakan properti stenografi urutan nilai properti adalah:

* Latar belakang warna
* Gambar-background
* Latar belakang-ulangi
* Latar belakang-lampiran
* Latar belakang-posisi

Tidak masalah jika salah satu dari nilai properti yang hilang, asalkan orang yang hadir dalam urutan ini.

Contoh ini menggunakan CSS lebih maju.

Contoh lainnya

Property	Description	Values	CSS
background	Mengatur semua properti latar belakang dalam satu deklarasi	warna latar belakang gambar-background latar belakang-latar belakang-lampiran ulangi posisi-background mewarisi	1
background-attachment	Mengatur apakah gambar latar belakang adalah tetap atau gulungan dengan sisa halaman	gulir tetap mewarisi/td>	1
background-color	Mengatur warna latar belakang suatu elemen	warna-rgb warna hex warna-nama transparan mewarisi	1
background-image	Mengatur gambar latar belakang untuk elemen	url (URL) tidak ada mewarisi	1
background-position	Mengatur posisi awal dari gambar latar belakang	kiri atas tengah kiri kiri bawah kanan atas kanan tengah kanan bawah tengah atas pusat pusat tengah bawah x% y% xpos ypos mewarisi	1
background-repeat	Menetapkan jika / bagaimana suatu gambar latar belakang akan diulangi	ulangi mengulang-x mengulang-y tidak mengulang- mewarisi	1