Latar belakang CSS – Properti singkatan
Properti background CSS shorthand digunakan untuk mempersingkat kode yang emungkinkan kita untuk memnemtukan semua properti background dalam satu properti tungggal.
Tidak menulis seperti ini:
body {
background-color: #ffffff;
background-image: url("https://dosenit.com/wp-content/uploads/2020/10/cartoon_mobile_phone.png");
background-repeat: no-repeat;
background-position: right top;
}Kita bisa gunakan properti background shorthand, seperti berikut :
Contoh
Gunakan properti shorthand untuk menyetel properti background dalam satu deklarasi:
<!DOCTYPE html> <html> <head> <style> body { background: #ffffff url("https://dosenit.com/wp-content/uploads/2020/10/cartoon_mobile_phone.png") no-repeat right top; margin-right: 200px; } </style> </head> <body> <h1> Properti Background CSS </h1> <p> Properti shorthand background adalah properti singkatan untuk menetapkan semua properti background dalam satu deklarasi. </p> <p> Di sini, gambar latar hanya ditampilkan sekali, dan juga ditempatkan di pojok kanan atas. </p> <p> kita juga telah menambahkan margin kanan, sehingga teks tidak akan menutupi gambar latar belakang. </p> </body> </html>
Saat menggunakan properti shorthand, urutan nilai properti adalah:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
Tidak masalah jika salah satu nilai properti hilang, selama yang lain ada dalam urutan ini. Perhatikan bahwa kita tidak menggunakan properti background-attachment dalam contoh di atas, karena tidak memiliki nilai.
All CSS Background Properties
| Properti | Deskripsi |
|---|---|
| background | Setel semua properti latar belakang dalam satu deklarasi |
| background-attachment | Menyetel gambar latar belakang tetap atau bergulir dengan sisa halaman |
| background-clip | Menentukan area lukisan latar belakang dengan sisa halaman |
| background-color | Menyetel warna latar belakang suatu elemen |
| background-image | Menyetel gambar latar belakang untuk suatu elemen |
| background-origin | Menentukan di mana gambar latar belakang diposisikan |
| background-position | Menetapkan posisi awal gambar latar belakang |
| background-repeat | Menyetel gambar latar akan diulang |
| background-size | Menentukan ukuran gambar latar belakang |
