Backgrounds

Properti background pada CSS digunakan untuk mengatur background dan efek background untuk elemen.

Background Color

Properti background-color digunakan untuk mengatur warna background pada suatu elemen. Jenis value dapat menggunakan value yang properti color izinkan.

Contoh implementasi :

body {
  background-color: lightblue;
}

Opacity

Properti opacity digunakan untuk mengatur opasitas suatu elemen.

Contoh implementasi :

div {
  background-color: green;
  opacity: 0.3;
}

Background Image

Properti background-image digunakan untuk mengatur gambar background suatu elemen.

Contoh implementasi :

body {
  background-image: url("paper.png");
}

Background Repeat

Properti background-repeat digunakan untuk mengulang gambar secara horizontal, vertikal, maupun keduanya.

Contoh implementasi :

body {
  background-image: url("gradient_bg.png");
}

Background Position

Properti background-position digunakan untuk mengatur posisi gambar background.

Contoh implementasi :

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Background Attachment

Properti background-attachment digunakan untuk mengatur apakah gambar background harus mengikuti scroll atau tetap diam.

Contoh implementasi :

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

Shorthand

Properti background dapat digunakan sebagai shorthand untuk mengatur background halaman.

Jadi, selain mengimplementasikan background seperti berikut :

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Kita dapat melakukannya seperti ini :

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

Harus diingat bahwa aturan shorthand sebagai berikut :

background-color - background-image - background-repeat - background-attachment - background-position