Apakah Anda ingin menambahkan gambar background ke situs WordPress? Gambar background bisa digunakan untuk membuat website terlihat lebih menarik dan estetis.
Di artikel ini, kita akan mengetahui bagaimana cara yang mudah untuk menambahkan gambar background ke situs WordPress.
Metode 1. Menambahkan gambar background menggunakan pengaturan tema WordPress
Kebanyakan tema WordPress yang gratis maupun premium memiliki dukungan background custom. Fitur ini membantu Anda dengan mudah mengatur gambar background ke situs WordPress.
Bila tema Anda mendukung fitur background custom, maka kami merekomendasikan menggunakan metode ini untuk menambahkan gambar background ke situs WordPress.
Tapi bila tema Anda tidak mendukung fitur background custom, maka Anda bisa menggunakan metode lain di artikel ini.
Masuk ke halaman Appearance >> Customize
Pertama, Anda perlu mengunjungi halaman Appearance >> Customize di admin WordPress. Langkah ini akan meluncurkan tema WordPress customizer dimana Anda bisa mengubah pengaturan tema sambil melihat live preview website Anda.
Selanjutnya, Anda perlu klik pilihan “Background image”. Panel ini akan menunjukkan pilihan untuk mengupload atau memilih gambar background untuk website Anda.
Pilih gambar
Klik pada tombol select image untuk melanjutkan.
Langkah ini akan memunculkan WordPress media uploader dimana Anda bisa mengupload gambar dari komputer.
Anda bisa juga memilih gambar yang sebelumnya diupload dari media library.
Selanjutnya Anda perlu klik pada tombol Choose image setelah mengupload atau memilih gambar yang Anda ingin gunakan sebagai background.
Langkah ini akan menutup media uploader popup, dan Anda akan melihat preview dari gambar yang Anda pilih di theme customizer.
Di bawah gambar Anda juga bisa melihat pilihan gambar background. Di bawah preset, Anda bisa memilih bagaimana Anda ingin gambar background ditampilkan: mengisi layar, sesuai layar, berulang, atau custom.
Posisi gambar
Anda bisa juga memilih posisi gambar background dengan mengklik pada panah di bawah. Klik pada center akan membuat gambar sejajar dengan tengah layar.
Jangan lupa mengklik tombol Save & Publish pada bagian atas untuk menyimpan pengaturan Anda. Itu saja. Anda telah berhasil menambahkan gambar background ke situs WordPress.
Anda bisa kunjungi website untuk melihat perubahannya.
Metode 2. Menambahkan gambar background custom di WordPress menggunakan plugin
Metode ini jauh lebih fleksibel. Cara ini bisa diterapkan pada tema WordPress mana saja dan membantu Anda mengatur banyak gambar background. Anda bisa juga mengatur background berbeda dari postingan mana saja, halaman, kategori, atau bagian lain di situs WordPress.
Metode ini secara otomatis membuat semua gambar background Anda full pada layar dan mobile responsif. Ini berarti gambar background Anda akan secara otomatis menyesuaikan ukuran pada perangkat yang lebih kecil.
Aktivasi plugin Full Screen Background Pro
Pertama Anda perlu instal dan aktifkan plugin Full Screen Background Pro.
Setelah aktivasi, Anda perlu kunjungi halaman Appearance >> Full Screen BG Image untuk mengkonfigurasi pengaturan plugin.
Anda akan diminta menambahkan kunci lisensi, Anda bisa mendapat informasi ini dari email yang Anda terima setelah membeli plugin atau dari akun pada website plugin.
Simpan perubahan
Selanjutnya Anda perlu klik pada tombol Save setting untuk menyimpan perubahan Anda. Sekarang Anda siap untuk mulai menambahkan gambar background ke situs WordPress.
Silahkan klik pada tombol Add New Image pada pengaturan halaman. Langkah ini akan membawa Anda ke layar upload gambar background.
Klik pada tombol Choose image untuk mengupload atau memilih gambar. Setelah Anda memilih gambar, Anda bisa melihat live preview dari gambar pada layar.
Memberi nama gambar
Selanjutnya, Anda perlu memberi nama untuk gambar ini. Nama ini akan digunakan secara internal, agar Anda bisa menggunakannya di sini.
Terakhir, Anda perlu memilih dimana Anda ingin gambar ini digunakan sebagai background halaman.
Full Screen Background Pro membantu Anda mengatur gambar sebagai background secara global, atau Anda bisa memilih dari bagian website berbeda seperti kategori, archives, halaman depan, halaman blog, dan sebagainya.
Jangan lupa untuk mengklik pada tombol save image untuk menyimpan gambar background Anda.
Anda bisa tambahkan sebanyak mungkin gambar dengan mengunjungi halaman Appearance >> Full Screen BG Image.
Bila ada banyak gambar
Bila Anda mengatur lebih dari satu gambar untuk digunakan secara global, maka plugin akan secara otomatis mulai menampilkan gambar background dalam slideshow.
Anda bisa sesuaikan waktu yang dibutuhkan untuk sebuah gambar hilang dan waktu setelah tiap gambar background baru mulai muncul.
Waktu yang Anda masukkan di sini dalam hitungan milidetik. Bila Anda ingin gambar background hilang setelah 20 detik, maka Anda perlu masukkan angka 20000.
Jangan lupa untuk mengklik tombol Save setting untuk menyimpan perubahan yang Anda lakukan.
Pengaturan gambar background untuk postingan individual, halaman, kategori, dan sebagainya
Full Screen Background Pro juga memungkinkan Anda untuk mengatur gambar background untuk postingan tunggal, halaman, kategori, tag, dan sebagainya. Cukup edit postingan atau halaman dimana Anda ingin menampilkan gambar background berbeda.
Pada layar post edit, Anda akan melihat kotak ‘Full Screen Background Image’ di bawah post editor.
Untuk menggunakan gambar untuk kategori spesifik, Anda perlu kunjungi Appearance >> Full Screen BG Image dan lalu klik pada tombol “Add New Image.”
Setelah mengupload gambar, Anda bisa memilih “Category” sebagai konteks dimana Anda ingin menampilkan gambar background.
Sekarang masukkan ID kategori spesifik atau slug dimana Anda ingin menampilkan gambar. Jangan lupa untuk menyimpan gambar untuk menyimpan pengaturan Anda.
Metode 3. Menambahkan gambar background custom dimana saja di WordPress menggunakan CSS
Secara default, WordPress menambahkan beberapa kelas CSS pada elemen HTML berbeda di seluruh website WordPress.
Anda bisa dengan mudah menambahkan gambar background custom pada postingan individual, kategori, dan halaman lain menggunakan WordPress generated CSS classes.
Misalnya, bila Anda memiliki kategori pada website yang disebut TV, maka WordPress akan secara otomatis menambahkan kelas CSS ini ke bagian body tag ketika seseorang melihat halaman kategori TV.
| 1 | <body class="archive category category-tv category-4"> |
Anda bisa menggunakan inspect tool untuk melihat secara jelas kelas CSS mana yang ditambahkan oleh WordPress ke body tag.
Anda bisa gunakan antara kelas CSS category-tv atau category-4 untuk mengatur halaman kategori ini.
Lalu tambahkan gambar background custom pada halaman category archive. Anda perlu tambahkan custom CSS ke tema.
body.category-tv { background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;} |
Jangan lupa mengganti URL gambar background dan kelas kategori dengan kategori Anda sendiri. Anda bisa juga menambahkan background custom ke postingan atau halaman individual. WordPress menambahkan kelas CSS dengan ID postingan atau ID halaman di body tag.
Anda bisa menggunakan kode CSS yang sama untuk menggantikan .category-tv dengan postingan kelas CSS spesifik.
Semoga artikel ini bermanfaat.