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:
CSS
xxxxxxxxxx1
body {2
background-color: #ffffff;3
background-image: url("https://dosenit.com/wp-content/uploads/2020/10/cartoon_mobile_phone.png");4
background-repeat: no-repeat;5
background-position: right top;6
}Kita bisa gunakan properti background shorthand, seperti berikut :
Contoh
Gunakan properti shorthand untuk menyetel properti background dalam satu deklarasi:
HTML
xxxxxxxxxx24
1
2
<html>3
<head>4
<style>5
body {6
background: #ffffff url("https://dosenit.com/wp-content/uploads/2020/10/cartoon_mobile_phone.png") no-repeat right top;7
margin-right: 200px;8
}9
</style>10
</head>11
<body>12
13
<h1> Properti Background CSS </h1>14
15
<p> Properti shorthand background adalah properti singkatan untuk menetapkan semua properti background dalam satu deklarasi. </p>16
17
<p> Di sini, gambar latar hanya ditampilkan sekali, dan juga ditempatkan di pojok kanan atas. </p>18
19
<p> kita juga telah menambahkan margin kanan, sehingga teks tidak akan menutupi gambar latar belakang. </p>20
21
22
</body>23
</html>24
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 |
