CSS latar belakang singkat

CSS background - properti singkat

jika ingin memperpendek kode, anda dapat menentukan semua properti latar belakang dalam satu properti. Ini disebut properti singkat.

tidak seperti ini:

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

anda dapat menggunakan properti singkat background:

contoh

atur properti latar belakang dalam satu deklarasi menggunakan properti singkat:

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

coba sendiri

pada saat menggunakan properti singkat, urutan nilai properti adalah:

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

jika salah satu nilai properti hilang, tak perlu khawatir, tinggal atur nilai lain sesuai urutan ini. Perhatikan, di contoh di atas, kita tidak menggunakan properti background-attachment karena ia tidak memiliki nilai.

semua properti latar belakang CSS

properti deskripsi
background atur semua properti latar belakang dalam satu deklarasi dalam bentuk singkat.
background-attachment atur apakah gambar latar belakang tetap atau menggulir bersama dengan bagian lain dari halaman.
background-clip tentukan area pengeritangan latar belakang.
background-color atur warna latar belakang elemen.
background-image atur gambar latar belakang elemen.
background-origin tentukan tempat penempatan gambar latar belakang.
background-position Tetapkan lokasi awal imej latar belakang.
background-repeat Tetapkan imej latar belakang untuk diulangi dan bagaimana ia diulangi.
background-size Tetapkan saiz imej latar belakang.