Latar

Podcast CSS - 053: Latar Belakang

Latar belakang

Di belakang setiap kotak CSS ada lapisan khusus yang disebut lapisan latar belakang. CSS menyediakan berbagai cara untuk membuat perubahan yang berarti padanya, termasuk mengizinkan beberapa latar belakang.

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

Warna latar belakang

Dukungan Browser

  • 1
  • 12
  • 1
  • 1

Sumber

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 dilukis pada elemen tersebut.

Gambar latar

Dukungan Browser

  • 1
  • 12
  • 1
  • 1

Sumber

Di atas lapisan background-color, Anda dapat menambahkan gambar latar 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 gradasi CSS

Ada beberapa fungsi CSS gradien yang memungkinkan Anda membuat gambar latar ketika diteruskan 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

Dukungan Browser

  • 1
  • 12
  • 1
  • 1

Sumber

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

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

  • repeat: Gambar akan diulang dalam ruang yang tersedia, dengan memangkas sesuai kebutuhan.
  • round: Gambar diulang secara horizontal dan vertikal agar sesuai dengan sebanyak mungkin instance ke dalam ruang yang tersedia. Karena ruang yang tersedia akan meningkatkan regangan gambar, dan setelah melebar setengah dari lebar asli gambar, akan mengompresi untuk menambahkan lebih banyak instance gambar.
  • space: Gambar diulang secara horizontal dan vertikal agar sesuai dengan sebanyak mungkin instance dalam ruang yang tersedia tanpa memangkas—memberi jarak instance gambar sesuai kebutuhan. Gambar berulang menyentuh tepi ruang yang ditempati oleh lapisan latar belakang, dengan ruang putih yang didistribusikan secara merata di antara gambar tersebut.

Properti background-repeat memungkinkan Anda menetapkan perilaku untuk sumbu x dan y secara terpisah. 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 ini juga memiliki opsi satu kata yang nyaman untuk membuat maksud Anda lebih jelas.

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

Demo berikut menunjukkan kemampuan properti background-repeat:

Posisi latar belakang

Dukungan Browser

  • 1
  • 12
  • 1
  • 1

Sumber

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

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

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

Ketika 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 menjadi masalah:

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

Urutan tidak penting untuk kata kunci yang terkait dengan sumbu posisi yang berbeda.
Larangan
  background-position: 50% left;

Ketika nilai CSS digunakan bersama kata kunci, urutannya 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 cara ringkas satu nilai yang praktis; nilai yang dihilangkan akan me-resolve menjadi 50%. Berikut adalah contoh yang menunjukkan hal tersebut menggunakan kata kunci yang diterima properti background-position:

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

Saat tiga atau empat parameter digunakan, panjang atau persentase CSS harus diawali dengan kata kunci top, left, right, atau bottom agar browser dapat menghitung tepi kotak CSS yang menjadi asal offset.

Saat tiga parameter digunakan, panjang atau nilai CSS dapat menjadi parameter kedua atau ketiga, dan dua parameter lainnya adalah kata kunci; kata kunci yang berhasil digunakan akan digunakan untuk menentukan tepi yang panjang atau nilai CSS-nya sesuai dengan offset. Offset dari 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 diawali 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 diawali 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 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.

Saat empat parameter digunakan, kedua kata kunci tersebut dipasangkan dengan dua nilai yang sesuai dengan offset terhadap asal dari setiap kata kunci yang ditentukan. Jika background-position: bottom 20% right 30% diterapkan ke gambar latar, gambar latar diposisikan 20% dari bawah, dan 30% dari sebelah kanan kotak CSS.

Demo berikut menunjukkan perilaku ini:

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

Ukuran Latar Belakang

Dukungan Browser

  • 3
  • 12
  • 4
  • 5

Sumber

Properti background-size menetapkan ukuran gambar latar; Secara default, gambar latar diubah ukurannya 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 terpisah.

Properti background-size menerima kata kunci berikut:

  • auto: Jika digunakan secara terpisah, gambar latar diubah ukurannya berdasarkan lebar dan tinggi intrinsiknya; saat auto digunakan bersama nilai CSS lain untuk lebar (parameter pertama) atau tinggi (parameter kedua), dimensi yang disetel ke auto akan diberi ukuran sesuai kebutuhan untuk mempertahankan rasio aspek alami gambar. Ini adalah perilaku default properti background-size.
  • cover: Mencakup seluruh area lapisan latar belakang. Hal ini dapat berarti gambar direntangkan atau dipangkas.
  • contain: Mengatur ukuran gambar untuk mengisi ruang tanpa meregangkan atau memangkas. Akibatnya, ruang kosong dapat tetap ada yang akan menyebabkan gambar diulang, kecuali jika background-repeat ditetapkan ke no-repeat.

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

Demo berikut menunjukkan penerapan kata kunci tersebut:

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

Lampiran latar belakang

Dukungan Browser

  • 1
  • 12
  • 1
  • 1

Sumber

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

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

Perilaku default properti background-attachment adalah nilai awal scroll. Jika perlu lebih banyak ruang, gambar akan bergerak dengan ruang tersebut di 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 berada di posisi asli, hingga seluruh lapisan di-scroll keluar layar oleh area pandang.

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

Asal latar belakang

Dukungan Browser

  • 1
  • 12
  • 4
  • 3

Sumber

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

Cobalah opsi ini menggunakan demo berikut:

Klip latar belakang

Dukungan Browser

  • 1
  • 12
  • 4
  • 5

Sumber

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, wilayah yang dapat ditentukan adalah border-box, padding-box, dan content-box yang sesuai dengan tempat lapisan latar belakang CSS dapat dirender. Saat kata kunci ini digunakan, rendering latar belakang yang lebih jauh dari wilayah yang ditentukan akan dipangkas atau dipangkas.

Properti background-clip juga menerima kata kunci text yang mengklip latar belakang tidak lebih dari teks dalam kotak konten. Agar efek ini terlihat jelas di teks sebenarnya dalam kotak CSS, teks harus transparan sebagian atau seluruhnya.

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

Dukungan Browser

  • 1
  • 12
  • 4
  • 5

Sumber

Beberapa latar belakang

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

Beberapa latar belakang didefinisikan dari atas ke bawah; Latar belakang pertama adalah yang terdekat 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 memudahkan penataan gaya lapisan latar belakang kotak-terutama ketika beberapa lapisan latar belakang diinginkan–ada cara pintas 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 singkat untuk mendeklarasikan beberapa latar belakang. Nilai posisi dan ukuran harus disediakan, dipisahkan dengan garis miring (/). Mendeklarasikan perilaku asal dan klip dalam urutan yang benar memungkinkan Anda memanfaatkan setelan kata kunci yang valid untuk keduanya secara bersamaan

Deklarasi berikut mengklip 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 cuplikan kode terkait latar belakang sebelumnya dapat ditulis ulang menjadi berikut:

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 ;

Menguji pemahaman Anda

Uji pengetahuan Anda tentang Latar Belakang CSS

Gambar latar terletak di kiri atas kotak CSS.

Benar
Benar.
Salah
Bergantung pada ukuran intrinsiknya, gambar mungkin tampak tidak pada posisi di sudut kiri atas kotak CSS, background-position perlu digunakan secara eksplisit untuk mengubah posisi default gambar latar.

Gambar latar tidak diulang secara default.

Salah
background-repeat: no-repeat secara eksplisit harus digunakan agar tidak mengulangi gambar latar. Selain itu, background-repeat: repeat-x dan background-repeat: repeat-y dapat digunakan untuk mencegah pengulangan pada sumbu tertentu.
Benar
Benar.

Manakah dari deklarasi background-position berikut yang valid?

background-position: 50% left
Ketika nilai CSS digunakan bersama kata kunci, urutan nilai penting.
background-position: top right 33%
Tindakan ini akan memosisikan gambar latar ke bagian paling atas kotak dan 33% dari tepi kanan kotak.
background-position: right bottom
Tindakan ini akan memosisikan gambar latar di bagian paling kanan dan bawah kotak. Posisi sumbu yang berbeda dapat diberi nama dalam urutan apa pun.
background-position: left
Tindakan ini akan memosisikan gambar latar di bagian paling kiri kotak dan berada di tengah secara vertikal. Jika hanya satu posisi sumbu yang disediakan, gambar latar dipusatkan pada sumbu yang berlawanan.

Untuk menyetel gambar latar agar tetap dalam area pandang, Anda menggunakan:

background-position: fixed
'Nilai ini tidak valid untuk properti background-position.'
background-fixed-to-viewport: true
background-fixed-to-viewport belum ada di CSS.
background-attachment: fixed
background-attachment: fixed secara eksplisit menetapkan gambar latar untuk diperbaiki dalam area pandang saat ini.
background-attachment: scroll
'background-attachment adalah properti yang digunakan untuk menyetel gambar latar yang akan diperbaiki dalam area pandang; tetapi scroll adalah nilai default untuk properti yang memperbaiki gambar latar secara default ke kotak yang tidak terpengaruh oleh konten dalam kotak'.

Origin latar belakang default dari latar belakang dalam kotak CSS adalah:

content-box
Nilai yang valid untuk background-origin, tetapi bukan merupakan default.
border-box
Nilai valid untuk background-origin, dan batasnya yang telah diatur sebelumnya dapat digambar di atas latar belakang, tetapi bukan merupakan default.
padding-box
Nilai default untuk background-origin. Memungkinkan latar belakang dirender di luar konten dan hingga ke batas kotak.
margin-box
Meskipun merupakan wilayah kotak CSS yang dikenali, nilai tersebut tidak valid untuk properti background-origin.