Gaya Latar Belakang - Bantuan Webflow

Last updated on 10/8/2025@mrbirddev

Tinjauan tentang gaya latar belakang yang dapat Anda atur pada elemen: warna, gambar, gradasi, overlay warna, dan video.

PERINGATAN KONTEN — bagian ini dapat mempengaruhi orang dengan sensitivitas visual. Kebijaksanaan penonton disarankan.

Warna latar belakang

Anda dapat mengatur warna latar belakang pada elemen apa pun kecuali gambar dan video (meskipun Anda dapat menggunakan gambar dan video sebagai latar belakang). Tambahkan warna latar belakang dengan memasukkan nilai warna (misalnya, hex, rgba, atau nama warna) atau dengan menggunakan pemilih warna. Anda juga dapat menambahkan warna latar belakang ke elemen teks atau konten teks tertentu di dalam elemen teks.

Jika Anda ingin warna latar belakang konsisten di seluruh situs Anda, gunakan tag Body (Semua halaman) untuk pewarisan. Gaya dengan memilih elemen Body dan memilih tag di panel Gaya atau menggunakan menu pewarisan. Setiap perubahan pada Body (Semua halaman) akan menjadi default untuk elemen baru.

Sebagian besar elemen memiliki latar belakang transparan secara default. Beberapa elemen, seperti komponen Slider, memiliki warna default yang dapat Anda ganti.

Gambar latar belakang

Webflow menawarkan banyak opsi untuk menyesuaikan gambar latar belakang Anda.

Untuk menambahkan atau mengubah gambar latar belakang:

Gulir ke Latar Belakang di Panel Gaya
Klik Pilih gambar dari panel Aset
Centang kotak untuk @2x untuk gambar yang lebih tajam pada perangkat HiDPI

Untuk mengatur video latar belakang, gunakan komponen video latar belakang di panel Tambah.

Ukuran gambar latar belakang

Kustom: Atur nilai lebar/tinggi atau persentase. Skala lebih besar dengan nilai di atas 100%.
Cover: Mengisi dan menutupi latar belakang, mungkin memotong gambar.
Contain: Menjaga gambar tetap di dalam elemen.

Posisi gambar latar belakang

Default adalah kiri atas. Anda dapat menyesuaikan posisi secara manual (px, %, VW, VH).

Ubin

Gambar latar belakang secara default mengulang baik secara vertikal maupun horizontal. Kontrol untuk mengulang secara horizontal, vertikal, atau tidak sama sekali.

Tetap atau gulir

Pilih Tidak tetap (gambar bergulir) atau Tetap (gambar tetap di tempat). Gambar Tetap dibatasi oleh viewport.

Gradasi

Gradasi dapat digunakan sendiri atau dilapisi pada warna/gambar latar belakang. Dua jenis:

Gradasi linear
Gradasi radial

Keduanya memiliki titik henti (titik) di mana warna memudar.

Safari memperlakukan gradasi ke transparansi sebagai "hitam transparan" sehingga transparansi akan terlihat hitam di Safari.

Gradasi linear

Atur arah dengan sudut melalui dial, panah (inkremen 45 derajat), atau entri bidang.

Titik henti gradasi

Edit warna/opasitas di titik henti. Melapisi di atas gambar membuat gambar terlihat pada opasitas lebih rendah. Tambahkan titik henti dengan mengklik. Hapus dengan menyeret keluar.

Ulangi

Toggles untuk mengulangi gradasi.

Balikkan

Ikon untuk membalikkan posisi titik henti.

Gradasi radial

Membuat gradasi melingkar. Titik henti kiri adalah warna di pusat.

Posisi

Pilih titik fokus melalui titik atau secara manual dengan nilai/satuan.

Ukuran

Kontrol preset:

Sisi terdekat: pusat ke sisi terdekat
Sudut terdekat: pusat ke sudut terdekat
Sisi terjauh: pusat ke sisi terjauh
Sudut terjauh: (default)

Lapisan warna

Tambahkan lapisan warna ke latar belakang dengan pemilih warna dan opasitas.

Melapisi gambar dan gradasi

Tumpuk beberapa gambar latar belakang, gradasi, dan lapisan untuk efek. Susun ulang dengan menyeret, alihkan visibilitas dengan ikon mata, hapus dengan ikon sampah.

Video latar belakang

Video latar belakang adalah video tanpa suara yang berulang untuk latar belakang untuk menambahkan kesan sinematik. Perhatikan:

Video yang diputar otomatis dan berulang dapat mengganggu atau menonaktifkan orang dengan masalah kognitif/vestibular. Selalu sediakan kontrol untuk menjeda.

Webflow menyediakan tombol putar/jeda secara default untuk aksesibilitas. Video tidak akan diputar otomatis bagi pengguna dengan pengaturan "Prefers reduced motion".

Tambahkan dengan Quick find (CMD/CTRL+E) atau panel Tambah > Komponen. Unggah video Anda (<30MB; webm, mp4, mov, ogg). Nama file sebaiknya menghindari spasi/karakter khusus.

Transcoding terjadi setelah unggahan (mp4 & webm untuk dukungan browser).

Pengaturan video

Ulangi video: diputar terus menerus.
Putar otomatis video: mulai saat halaman dimuat.
Sertakan tombol putar/jeda: pengunjung dapat mengontrol pemutaran.

WCAG memerlukan kontrol jeda/berhenti/sembunyi untuk konten bergerak yang berjalan lebih dari 5 detik. Selalu sediakan kontrol untuk aksesibilitas.

Pratinjau video latar belakang

Arahkan kursor ke thumbnail
Buka di tab baru
Ikon pratinjau di bar

Mengganti video latar belakang

Buka pengaturan untuk mengganti video, transcoding, pratinjau, dll.

Menggunakan video latar belakang sebagai bagian

Letakkan konten di dalam elemen Video latar belakang. Gaya seperti biasa di panel Gaya.

Video latar belakang mungkin tidak diputar otomatis pada perangkat sentuh jika penghemat data atau mode daya rendah diaktifkan.

Lapisan video latar belakang

Tambahkan gradien atau lapisan solid untuk kontras. Lapisan berada di atas video, di bawah konten.

Dan itulah cara menggunakan latar belakang di Webflow!

Kembali ke bantuan webflow

Last updated on 10/8/2025@mrbirddev