Latar

Di balik setiap kotak CSS terdapat lapisan khusus yang disebut lapisan latar belakang. CSS menyediakan berbagai cara untuk membuat perubahan yang bermakna, termasuk mengizinkan beberapa latar belakang.

Lapisan latar belakang paling jauh dari pengguna, dirender di belakang konten kotak mulai dari wilayah padding-box-nya. Hal ini memungkinkan lapisan latar belakang tidak tumpang-tindih dengan batas sama sekali.

Warna latar belakang

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Salah satu efek paling sederhana yang dapat Anda terapkan ke lapisan latar belakang adalah menyetel warna. Nilai awal background-color adalah transparent, yang memungkinkan konten induk terlihat. Warna valid yang ditetapkan pada lapisan latar belakang berada di belakang hal lain yang dicat pada elemen tersebut.

Gambar latar

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Di atas lapisan background-color, Anda dapat menambahkan gambar latar belakang, menggunakan properti background-image. background-image menerima hal berikut:

  • URL gambar atau URI data menggunakan fungsi CSS url.
  • Gambar yang dibuat secara dinamis oleh fungsi CSS gradien.

Menetapkan gambar latar dengan fungsi CSS url

Latar belakang gradien CSS

Ada beberapa fungsi CSS gradient yang memungkinkan Anda membuat gambar latar belakang, saat meneruskan dua warna atau lebih.

Terlepas dari fungsi gradien yang digunakan, gambar yang dihasilkan diukur secara intrinsik agar sesuai dengan jumlah ruang yang tersedia.

Demo yang menunjukkan contoh penerapan gambar latar menggunakan fungsi gradien:

Gambar latar berulang

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Secara default, gambar latar belakang diulang secara horizontal dan vertikal untuk mengisi seluruh ruang lapisan latar belakang.

Ubah ini dengan menggunakan properti background-repeat dengan salah satu nilai berikut:

  • repeat: Gambar diulang dalam ruang yang tersedia, dipangkas sesuai kebutuhan.
  • round: Gambar diulang secara horizontal dan vertikal agar sesuai dengan sebanyak mungkin instance dalam ruang yang tersedia. Seiring bertambahnya ruang yang tersedia, gambar akan diregangkan, dan setelah meregangkan setengah dari lebar asli gambar, gambar akan dikompresi untuk menambahkan lebih banyak instance gambar.
  • space: Gambar diulang secara horizontal dan vertikal agar sesuai dengan sebanyak mungkin instance dalam ruang yang tersedia tanpa pemangkasan—menyetel spasi instance gambar sesuai kebutuhan. Gambar berulang menyentuh tepi ruang yang ditempati lapisan latar belakang, dengan spasi kosong yang didistribusikan secara merata di antara keduanya.

Properti background-repeat memungkinkan Anda menetapkan perilaku untuk sumbu x dan y secara independen. Parameter pertama menetapkan perilaku pengulangan horizontal, dan parameter kedua menetapkan perilaku pengulangan vertikal.

Jika Anda menggunakan satu nilai, nilai tersebut akan diterapkan ke pengulangan horizontal dan vertikal.

Singkatan juga memiliki opsi satu kata yang praktis untuk memperjelas maksud Anda.

Nilai repeat-x hanya mengulangi gambar secara horizontal; ini setara dengan repeat no-repeat.

Demo berikut menunjukkan kemampuan properti background-repeat ini:

Posisi latar belakang

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Anda mungkin telah melihat bahwa saat beberapa gambar di Web diberi gaya dengan deklarasi background-repeat: no-repeat, gambar tersebut ditampilkan di kiri atas penampung.

Posisi awal gambar latar adalah kiri atas. Properti background-position memungkinkan Anda mengubah perilaku ini dengan mengimbangi posisi gambar.

Seperti background-repeat, properti background-position memungkinkan Anda memosisikan gambar di sepanjang sumbu x dan y secara independen dengan dua nilai secara default.

Saat panjang dan persentase CSS digunakan, parameter pertama sesuai dengan sumbu horizontal, sedangkan parameter kedua sesuai dengan sumbu vertikal.

Jika kata kunci hanya digunakan, urutan kata kunci tidak penting:

Anjuran
background-position: left 50%;
Anjuran
background-position: top left;
Anjuran
background-position: left top;

Urutan tidak berpengaruh pada kata kunci yang dikaitkan dengan sumbu posisi yang berbeda.

Larangan
  background-position: 50% left;

Jika nilai CSS digunakan bersama kata kunci, urutan akan menjadi penting. Nilai pertama mewakili sumbu horizontal dan nilai kedua mewakili sumbu vertikal.

Larangan
  background-position: left right;

Anda tidak dapat menggunakan kata kunci yang terkait dengan sumbu yang sama secara bersamaan.

Properti background-position juga memiliki singkatan satu nilai yang praktis; nilai yang dihilangkan akan di-resolve ke 50%. Berikut adalah contoh yang menunjukkan hal ini menggunakan kata kunci yang diterima properti background-position:

Selain bentuk dua parameter dan satu parameter default, properti background-position juga menerima hingga empat parameter;

Jika tiga atau empat parameter digunakan, panjang atau persentase CSS harus didahului dengan kata kunci top, left, right, atau bottom agar browser dapat menghitung tepi kotak CSS tempat offset harus berasal.

Jika tiga parameter digunakan, panjang atau nilai CSS dapat berupa parameter kedua atau ketiga dengan dua parameter lainnya berupa kata kunci; kata kunci yang berhasil akan digunakan untuk menentukan tepi yang sesuai dengan panjang atau nilai CSS sebagai offset. Offset kata kunci lain yang ditentukan ditetapkan ke 0.

Anjuran
background-position: bottom 88% right;
Anjuran
background-position: right bottom 88%;
Larangan
background-position: 88% bottom right;
Nilai panjang CSS harus didahului dengan kata kunci top, right, bottom, atau left saat menggunakan tiga parameter atau lebih.
Anjuran
background-position: bottom 88% right 33%;
Anjuran
background-position: right 33% bottom 88%;
Larangan
background-position: 88% 33% bottom left;
Nilai panjang CSS harus didahului dengan kata kunci top, right, bottom, atau left saat menggunakan tiga parameter atau lebih.

Jika background-position: top left 20% diterapkan ke gambar latar CSS, gambar akan ditempatkan di bagian atas kotak, nilai 20% mewakili offset 20% dari kiri kotak (pada sumbu x).

Jika background-position: top 20% left diterapkan ke gambar latar CSS, nilai 20% mewakili offset 20% dari bagian atas kotak CSS (pada sumbu y), dan gambar ditempatkan di sebelah kiri kotak.

Jika empat parameter digunakan, dua kata kunci akan disambungkan dengan dua nilai yang sesuai dengan offset terhadap asal setiap kata kunci yang ditentukan. Jika background-position: bottom 20% right 30% diterapkan ke background-image, background-image akan diposisikan 20% dari bawah, dan 30% dari kanan kotak CSS.

Demo berikut menunjukkan perilaku ini:

Berikut adalah contoh lain penggunaan properti background-position menggunakan campuran nilai CSS dan kata kunci:

Ukuran Latar Belakang

Browser Support

  • Chrome: 3.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

Properti background-size menetapkan ukuran gambar latar; Secara default, gambar latar diukur berdasarkan lebar, tinggi, dan rasio aspek intrinsik (sebenarnya).

Properti background-size menggunakan nilai panjang dan persentase CSS atau kata kunci tertentu. Properti ini menerima hingga dua parameter yang sesuai untuk memungkinkan Anda mengubah lebar dan tinggi latar belakang secara independen.

Properti background-size menerima kata kunci berikut:

  • auto: Jika digunakan secara independen, ukuran gambar latar belakang didasarkan pada lebar dan tinggi intrinsiknya; jika auto digunakan bersama nilai CSS lain untuk lebar (parameter pertama) atau tinggi (parameter kedua), dimensi yang ditetapkan ke auto akan diukur sesuai kebutuhan untuk mempertahankan rasio aspek alami gambar. Ini adalah perilaku default properti background-size.
  • cover: Meliputi seluruh area lapisan latar belakang. Hal ini mungkin berarti gambar diskalakan atau dipangkas.
  • contain: Mengubah ukuran gambar untuk mengisi ruang tanpa merentangkan atau memangkas. Akibatnya, ruang kosong dapat tetap ada yang akan menyebabkan gambar berulang, kecuali jika background-repeat ditetapkan ke no-repeat.

Dua yang terakhir dimaksudkan untuk digunakan secara mandiri tanpa parameter lain.

Demo berikut menunjukkan cara kerja kata kunci ini:

Demo yang menunjukkan penerapan kata kunci ini ke background-size:

Lampiran latar belakang

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Properti background-attachment memungkinkan Anda mengubah perilaku posisi tetap gambar latar (gambar yang merupakan bagian dari lapisan latar) setelah lapisan terlihat di layar.

Fungsi ini menerima 3 kata kunci: scroll, fixed, dan local.

Perilaku default properti background-attachment adalah nilai awal scroll. Jika lebih banyak ruang diperlukan, gambar akan bergerak dengan ruang tersebut dalam lapisan latar belakang yang ditentukan oleh batas kotak CSS.

Menggunakan nilai fixed akan memperbaiki posisi gambar latar ke area pandang.

Setelah ruang gambar lapisan latar belakang yang awalnya digunakan perlu di-scroll (atau dirender) di luar layar, gambar dalam lapisan latar belakang tetap tetap di posisi asli yang diaktifkan oleh lapisan latar belakang hingga seluruh lapisan di-scroll di luar layar oleh area pandang.

Kata kunci local memungkinkan posisi gambar latar diperbaiki relatif terhadap konten elemen. Gambar latar belakang kini bergerak di sepanjang ruang yang ditempatinya saat ruang tersebut dirender di dalam dan di luar batas kotak CSS (biasanya karena transformasi scroll, 2D, atau 3D).

Asal latar belakang

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 3.

Source

Properti background-origin memungkinkan Anda mengubah area latar belakang yang terkait dengan kotak tertentu. Nilai yang diterima properti sesuai dengan wilayah border-box , padding-box, dan content-box kotak .

Coba opsi ini menggunakan demo berikut:

Klip latar belakang

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

Properti background-clip mengontrol apa yang terlihat secara visual dari lapisan latar belakang, terlepas dari batas yang dibuat oleh properti background-origin.

Seperti background-origin, region yang dapat ditentukan adalah border-box, padding-box, dan content-box yang sesuai dengan tempat lapisan latar belakang CSS dapat dirender. Jika kata kunci ini digunakan, rendering latar belakang yang lebih jauh dari wilayah yang ditentukan akan dipangkas atau dipotong.

Properti background-clip juga menerima kata kunci text yang memangkas latar belakang agar tidak lebih jauh dari teks dalam kotak konten. Agar efek ini terlihat dalam teks sebenarnya dalam kotak CSS, teks harus transparan sebagian atau sepenuhnya.

Properti yang relatif baru, pada saat penulisan ini, Chrome dan sebagian besar browser memerlukan awalan -webkit- untuk menggunakan properti ini.

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

Beberapa latar belakang

Seperti yang disebutkan di awal modul, lapisan latar belakang memungkinkan beberapa sublapisan ditentukan. Untuk mempersingkat, saya akan menyebut sublapisan ini sebagai latar belakang.

Beberapa latar belakang ditentukan dari atas ke bawah; Latar belakang pertama adalah yang paling dekat dengan pengguna, sedangkan latar belakang terakhir adalah yang paling jauh dari pengguna.

Satu-satunya latar belakang yang ditentukan atau lapisan terakhir ditetapkan sebagai lapisan latar belakang akhir oleh browser. Hanya lapisan ini yang diizinkan untuk menetapkan background-color.

Beberapa lapisan dapat dikonfigurasi satu per satu menggunakan sebagian besar properti CSS terkait latar belakang yang dipisahkan koma, seperti yang ditunjukkan dalam cuplikan kode dan demo langsung di bawah.

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

Singkatan latar belakang

Untuk mempermudah gaya lapisan latar belakang kotak, terutama jika beberapa lapisan latar belakang diinginkan, ada singkatan yang mengikuti pola spesifik berikut:

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

Urutan penting dalam bentuk singkatan untuk mendeklarasikan beberapa latar belakang. Nilai posisi dan ukuran harus diberikan, dipisahkan dengan garis miring (/). Dengan mendeklarasikan asal dan perilaku klip dalam urutan yang benar, Anda dapat memanfaatkan setelan kata kunci yang valid untuk keduanya secara bersamaan

Deklarasi berikut memotong latar belakang, dan berasal dari kotak konten:

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

Dengan mempertimbangkan semantik singkat ini, deklarasi terkait latar belakang cuplikan kode sebelumnya dapat ditulis ulang menjadi:

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

Memeriksa pemahaman Anda

Uji pengetahuan Anda tentang Latar Belakang CSS

Gambar latar ditempatkan di kiri atas kotak CSS.

Benar
Salah

Gambar latar diulang secara default.

Benar
Salah

Manakah dari deklarasi background-position berikut yang valid?

background-position: left
background-position: top right 33%
background-position: right bottom
background-position: 50% left

Untuk menetapkan gambar latar agar tetap berada dalam area pandang yang Anda gunakan:

background-fixed-to-viewport: true
background-attachment: scroll
background-attachment: fixed
background-position: fixed

Origin latar belakang default latar belakang dalam kotak CSS adalah:

border-box
content-box
margin-box
padding-box