`background_bg_width` Elementor Tidak Keluar di CSS: di UI Tertulis 'Custom', di Data Tersimpan 'initial'

Ada satu tugas kecil di sebuah situs klien: lingkaran dekorasi yang duduk di belakang section FAQ dan harus tetap center di semua lebar viewport. Section ini disebar ke 16 halaman, jadi saya butuh satu pola yang aman diduplikasi, bukan tambalan posisi yang diatur ulang per halaman.

Percobaan pertama: container dekorasi dengan absolute positioning. Ini jalan buntu yang cepat ketahuan. Kontrol offset Elementor hanya menjangkar elemen ke start atau end, tidak ada jangkar ke tengah. Offset dalam px memang bisa membuat lingkaran pas di tengah, tapi hanya di SATU lebar viewport per breakpoint. Geser lebar browser sedikit, lingkarannya ikut melenceng. Untuk elemen yang syaratnya "selalu center", pendekatan ini kalah sebelum bertanding.

Jadi saya ganti strategi: buang container-nya, jadikan lingkarannya background_image milik section. Background dapat background_position: center center yang bekerja di semua lebar viewport tanpa hitung-hitungan offset. Tinggal satu hal yang perlu dikontrol: ukurannya. SVG-nya digambar di canvas 600x600, sementara desain minta lebar berbeda per breakpoint. Untuk itu Elementor menyediakan background_bg_width.

Karena polanya dipakai di 16 halaman, saya set setting section-nya lewat kode, bukan klik editor satu per satu. Saya isi background_bg_width 720px untuk desktop, 528px untuk tablet, 336px untuk mobile, lalu cek CSS yang dihasilkan Elementor. Hasilnya: tidak ada background-size sama sekali. Bukan nilainya yang salah. Rule-nya tidak pernah ditulis.

Jalan buntu: datanya ada, CSS-nya tidak

Tersangka pertama tentu gagal simpan. Saya cek data section-nya: background_bg_width tersimpan rapi, lengkap dengan unit px dan size 720. Bukan itu. Regenerate CSS Elementor, hard refresh, tetap kosong. Nama kontrolnya juga sudah benar, bukan salah ketik. Semua tersangka standar gugur satu per satu, sementara gejalanya konsisten: nilai lebar custom itu cuma jadi data mati di database.

Akar masalahnya: di UI tertulis "Custom", di data tersimpan `initial`

Jawabannya baru muncul setelah saya baca definisi kontrol background di source Elementor. Dropdown Display Size itu enum dengan empat nilai: auto, cover, contain, dan initial. Bagian yang menyesatkan: nilai initial diberi label "Custom" di UI. Dua kata itu tidak pernah ketemu di kepala saya, karena tidak ada satu pun petunjuk di editor bahwa "Custom" yang saya lihat sebenarnya tersimpan sebagai initial.

Dan di situlah gejalanya terjelaskan: background_bg_width hanya dipancarkan ke CSS ketika background_size bernilai persis initial, dalam bentuk background-size: Npx auto. String kosong berarti tidak ada rule sama sekali. auto berarti SVG dirender di ukuran naturalnya. Saya menulis setting lewat kode dan tidak pernah menyentuh initial, jadi Elementor dengan patuh mengabaikan semua nilai lebar yang saya isi.

Perbaikannya

Begitu tahu nilai kuncinya, perbaikannya pendek. Container absolut yang lama saya hapus total, lalu section-nya memakai satu set setting ini:

'background_background' => 'classic',
'background_image'      => [ 'url' => $svg_url, 'id' => $svg_attachment_id, 'source' => 'library' ],
'background_position'   => 'center center',
'background_repeat'     => 'no-repeat',
'background_size'       => 'initial', // 'initial' = "Custom" di UI
'background_bg_width'        => [ 'unit' => 'px', 'size' => 720 ],
'background_bg_width_tablet' => [ 'unit' => 'px', 'size' => 528 ],
'background_bg_width_mobile' => [ 'unit' => 'px', 'size' => 336 ],

Aset background-nya sendiri cuma SVG sekitar 150 byte:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><circle cx="300" cy="300" r="300" fill="#F6F1F6"/></svg>

Dengan background_size bernilai initial, CSS yang saya tunggu dari tadi akhirnya keluar:

/* desktop */
background-size: 720px auto;
 
/* @media (max-width: 1024px) */
background-size: 528px auto;
 
/* @media (max-width: 767px) */
background-size: 336px auto;

Lingkarannya sekarang center otomatis di semua viewport, nol matematika offset, dan polanya aman disebar ke 16 halaman tanpa penyesuaian per halaman.

Pelajaran

Label UI Elementor bukan nilai data. "Custom" di dropdown Display Size tersimpan sebagai initial. Kalau mengatur setting lewat kode, baca definisi kontrolnya, jangan menebak dari label.
background_bg_width hanya keluar kalau background_size persis initial. String kosong berarti tidak ada rule, auto berarti ukuran natural gambar.
Untuk dekorasi yang harus selalu center, background image section dengan center center mengalahkan absolute positioning: tanpa offset yang hanya akurat di satu lebar viewport, dan selamat di semua breakpoint.