Latar

Podcast CSS - 053: Latar Belakang

Latar belakang

Di balik setiap kotak CSS terdapat 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, yang 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

Salah satu efek paling sederhana yang dapat Anda terapkan ke lapisan latar belakang adalah menetapkan 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

Selain 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 gradien CSS

Beberapa fungsi CSS gradien tersedia untuk memungkinkan Anda membuat gambar latar, saat meneruskan dua warna atau lebih.

Apa pun fungsi gradien yang digunakan, gambar yang dihasilkan berukuran secara intrinsik agar sesuai dengan jumlah ruang yang tersedia.

Demo yang menunjukkan contoh penerapan gambar latar menggunakan fungsi gradien:

Gambar latar berulang

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, dan dipangkas sesuai kebutuhan.
• round: Gambar diulang secara horizontal dan vertikal agar sesuai dengan sebanyak mungkin instance ke dalam ruang yang tersedia. Seiring dengan bertambahnya ruang yang tersedia, gambar akan direntangkan, dan setelah melebarkan setengah dari lebar asli gambar akan dikompresi untuk menambahkan instance gambar lainnya.
• space: Gambar diulang secara horizontal dan vertikal agar sesuai dengan banyak instance dalam ruang yang tersedia tanpa memangkas—menjauhkan 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 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 ini juga memiliki opsi satu kata yang mudah digunakan untuk memperjelas maksud Anda.

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

Demo berikut menunjukkan kemampuan properti background-repeat ini:

Posisi latar belakang

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 di kiri atas. Properti background-position memungkinkan Anda mengubah perilaku ini dengan mengganti 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.

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

Bila kata kunci hanya digunakan, urutan kata kunci tidak menjadi masalah:

background-position: left 50%;

background-position: top left;

background-position: left top;

  background-position: 50% left;

  background-position: left right;

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

Selain dua parameter {i>default-<i}nya dan satu bentuk parameter; properti background-position juga menerima hingga empat parameter;

Jika tiga atau empat parameter digunakan, durasi atau persentase CSS harus didahului dengan kata kunci top, left, right, atau bottom agar browser dapat menghitung tepi kotak CSS mana yang harus menjadi asal offset.

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

background-position: bottom 88% right;

background-position: right bottom 88%;

background-position: 88% bottom right;

background-position: bottom 88% right 33%;

background-position: right 33% bottom 88%;

background-position: 88% 33% bottom left;

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 (di sumbu y), dan gambar ditempatkan di sebelah kiri kotak.

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

Demo berikut menunjukkan perilaku ini:

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

Ukuran Latar Belakang

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

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

Properti background-size menerima kata kunci berikut:

• auto: Jika digunakan secara terpisah, gambar latar berukuran berdasarkan lebar dan tinggi intrinsiknya; jika auto digunakan bersama nilai CSS lain untuk lebar (parameter pertama) atau tinggi (parameter kedua), dimensi yang ditetapkan ke auto disesuaikan ukurannya 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 berulang, kecuali jika background-repeat disetel ke no-repeat.

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

Demo berikut menunjukkan cara kerja kata kunci tersebut:

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

Lampiran latar belakang

Properti background-attachment memungkinkan Anda mengubah perilaku posisi tetap dari gambar latar (bagian gambar 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 diperlukan lebih banyak ruang, 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 tampilan.

Setelah ruang dari gambar lapisan latar belakang yang awalnya diperlukan harus di-scroll (atau dirender) di luar layar, gambar dalam lapisan latar belakang tetap berada di posisi asli, lapisan latar belakang memungkinkannya 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 mereka tempati ketika ruang itu dirender di dalam dan di luar batas kotak CSS (biasanya karena pengguliran, transformasi 2D, atau 3D).

Asal latar belakang

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

Cobalah opsi ini menggunakan demo berikut:

Klip latar belakang

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. Ketika kata kunci ini digunakan, setiap rendering latar belakang yang lebih jauh dari wilayah yang ditetapkan akan dipangkas atau diklip.

Properti background-clip juga menerima kata kunci text yang mengklip latar belakang tidak lebih jauh dari teks dalam kotak konten. Agar efek ini terlihat dalam 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.

Berbagai latar belakang

Seperti yang disebutkan di awal modul, lapisan latar belakang memungkinkan beberapa sublapisan ditentukan. Untuk singkatnya, saya akan menyebut sublapisan 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 terjauh dari pengguna.

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

Beberapa lapisan dapat dikonfigurasikan secara individual menggunakan sebagian besar properti CSS yang berkaitan dengan latar belakang yang dipisahkan koma, seperti yang ditunjukkan dalam cuplikan kode dan demo langsung di bawah ini.

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;

Latar belakang singkat

Untuk mempermudah 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 singkatan untuk mendeklarasikan beberapa latar belakang. Nilai posisi dan ukuran harus diberikan, dipisahkan dengan garis miring (/). Mendeklarasikan asal dan perilaku klip dalam urutan yang benar memungkinkan Anda memanfaatkan setelan kata kunci yang valid untuk keduanya secara bersamaan

Pernyataan 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 sebagai 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