Latar belakang - Trik CSS | CSS Almanak 2024

The backgroundproperti di CSS memungkinkan Anda untuk mengontrol latar belakang dari setiap elemen (cat apa yang di bawah konten dalam elemen itu). Ini adalah properti singkatan, yang artinya memungkinkan Anda untuk menulis apa yang akan menjadi beberapa properti CSS menjadi satu. Seperti ini:

body ( background: url(sweettexture.jpg.webp) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ )

background terdiri dari delapan properti lainnya:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

Anda dapat menggunakan kombinasi dari properti ini yang Anda suka, di hampir semua urutan (meskipun urutan yang direkomendasikan dalam spesifikasi di atas). Namun ada gotcha: apapun yang tidak Anda tentukan di backgroundproperti secara otomatis disetel ke default. Jadi jika Anda melakukan sesuatu seperti ini:

body ( background-color: red; background: url(sweettexture.jpg.webp); )

Latar belakang akan transparan, bukan merah. Perbaikannya mudah: cukup tentukan background-colorsetelahnya background, atau cukup gunakan singkatan (misalnya background: url(… ) red;)

Latar Belakang Ganda

CSS3 menambahkan dukungan untuk banyak latar belakang, yang melapisi di atas satu sama lain. Properti apa pun yang terkait dengan latar belakang dapat mengambil daftar yang dipisahkan koma, seperti ini:

body ( background: url(sweettexture.jpg.webp), url(texture2.jpg.webp) black; background-repeat: repeat-x, no-repeat; )

Setiap nilai dalam daftar yang dipisahkan koma berkaitan dengan sebuah lapisan: nilai pertama adalah lapisan atas, nilai kedua adalah lapisan kedua, dan warna latar belakang selalu merupakan lapisan terakhir.

Resep

Lihat Pen emBzRd oleh Timothy Miller (@tjacobdesign) di CodePen.

Dukungan Browser

Dukungan bervariasi di antara properti spesifik yang berbeda, dan setiap artikel terkait di Almanac memiliki catatan dukungan browser yang unik. Latar belakang satu warna dasar dan gambar tunggal berfungsi di mana-mana, dan apa pun yang tidak didukung akan kembali ke hal terbaik berikutnya, apakah itu gambar atau warna.