Salah satu elemen website yang sering kali dianggap sepele tetapi memiliki dampak besar pada estetika dan user experience adalah penggunaan background image.

Dengan memanfaatkan background image CSS, kamu tidak hanya bisa mengubah tampilan situs menjadi lebih menarik, tetapi juga memiliki kebebasan kreatif untuk menyampaikan pesan atau tema dari situs kamu.

Dalam artikel ini, kita akan membahas secara lengkap bagaimana cara mengoptimalkan penggunaan background image dengan CSS, mulai dari pemilihan jenis file, penempatan, hingga pengaturan ukuran dan posisi. Yuk, simak!

Cara Menambah Background Image dengan CSS

Salah satu elemen yang bisa membuat tampilan website kamu lebih menarik adalah penggunaan gambar latar atau background image.

Browser modern saat ini mendukung berbagai jenis file gambar, mulai dari .jpg, .png, .gif, sampai.svg. Dengan begitu, kamu memiliki kebebasan untuk memilih jenis file yang paling sesuai dengan kebutuhan desain website kamu.

Perlu juga diketahui bahwa property background image dalam CSS dapat menerima hingga dua elemen. Artinya, kamu bisa menggabungkan dua background atau bahkan menggabungkan background  dengan color background.

Untuk menambahkan background image, pertama pastikan kamu sudah memiliki direktori (folder) khusus untuk menyimpan gambar-gambar yang akan digunakan. Misalnya, kamu bisa membuat folder bernama images dan menambahkan gambar yang ingin dipakai, seperti sunset.png.

Setelah itu, kamu bisa menggunakan properti background-image dalam CSS untuk menentukan gambar latar yang akan digunakan. Contohnya, untuk menambahkan gambar latar pada elemen section, kamu dapat menulis kode CSS sebagai berikut:

Dalam kode di atas, section adalah tag HTML yang akan diberi background dan url("images/sunset.png") adalah lokasi dari gambar tersebut.

Jangan lupa untuk menambahkan tanda titik koma (;) di akhir baris kode.

Cara Mengatur Posisi dan Ukuran Background Image

Setelah berhasil menambahkan gambar untuk background, langkah selanjutnya adalah mengatur posisi dan ukuran dari background image. Proses ini penting untuk memastikan tampilan website kamu sesuai dengan yang diinginkan.

Berikut beberapa cara untuk melakukannya:

Mengatur posisi background image

Untuk mengatur posisi dari background, kamu dapat menggunakan properti background-position dalam CSS. Properti ini membutuhkan dua value, satu untuk posisi horizontal (x) dan satu lagi untuk posisi vertikal (y).

Sebagai contoh, jika kamu ingin memindahkan gambar 20px ke arah horizontal dan 30px ke arah vertikal, kode CSS-nya akan seperti ini:

Kamu juga bisa menerapkan kata kunci seperti right, left, top, down, atau center untuk menentukan posisi gambar. 

Contoh, kamu ingin meletakkan gambar di tengah secara horizontal dan vertikal:

Mengatur ukuran background image

Ukuran dari background bisa diatur dengan menggunakan properti background-size. 

Sama seperti background-position, properti ini juga membutuhkan dua value, satu untuk ukuran horizontal dan satu lagi untuk ukuran vertikal.

Misalnya, untuk mengatur ukuran gambar menjadi 20px x 40px, kamu bisa menulis kode CSS sebagai berikut:

Selain itu, kamu juga dapat menggunakan value khusus seperti cover atau contain. Nilai cover akan memastikan gambar mengisi seluruh area elemen, meskipun hal ini bisa menyebabkan gambar terpotong. Sementara contain akan memastikan seluruh gambar terlihat tanpa terpotong, meskipun bisa meninggalkan ruang kosong di elemen.

Contoh:

Cara Menghentikan Pengulangan Background Image

Menghentikan pengulangan background image CSS adalah salah satu aspek yang perlu diperhatikan dalam desain web. Sebelum kita membahas cara menghentikannya, mari kita pahami dulu mengapa background cenderung berulang.

Secara default, jika ukuran background lebih kecil dari elemen HTML tempat gambar tersebut ditempatkan, gambar akan diulang-ulang secara otomatis oleh browser. 

Hal ini dilakukan untuk mengisi seluruh area elemen tersebut. Meskipun kadang bisa memberikan efek estetika, namun dalam banyak kasus, pengulangan justru membuat tampilan menjadi kurang menarik atau bahkan mengganggu.

Untuk menghentikan gambar latar dari pengulangan, kamu bisa menggunakan properti CSS background-repeat dan memberikan value no-repeat. Dengan cara ini, gambar akan ditampilkan satu kali saja dan tidak akan diulang. Berikut contoh kode CSS untuk menghentikan pengulangan background pada elemen section:

Jika kamu ingin gambar berulang hanya pada sumbu horizontal atau hanya pada sumbu vertikal, kamu juga dapat menggunakan value repeat-x atau repeat-y.

Contoh:

FAQ (Frequently Asked Question)

Apakah ada batasan ukuran gambar background yang disarankan?

Tidak ada batasan ukuran gambar latar belakang yang secara spesifik disarankan oleh CSS atau HTML. Namun, penting untuk mempertimbangkan performa website dan kecepatan loading.

Gambar dengan ukuran file yang besar bisa memengaruhi kecepatan loading situs, sehingga disarankan untuk menggunakan gambar yang telah dioptimasi tanpa mengorbankan kualitas.

Bagaimana cara memastikan background image tampil dengan konsisten di semua browser?

Untuk memastikan background image tampil konsisten di semua browser, ada beberapa hal yang bisa kamu lakukan.

• Pastikan untuk menggunakan format gambar yang didukung oleh semua browser modern, seperti .jpg, .png, WEBP, atau .svg. Namun, format yang lebih disarankan adalah WEBP karena ukurannya jauh lebih kecil, kualitasnya tetap bagus, dan support transparent background
• Gunakan prefix vendor dan fallback dalam CSS jika menggunakan fitur CSS yang belum sepenuhnya didukung oleh semua browser.
• Selalu lakukan pengujian tampilan di berbagai browser untuk memastikan semuanya berjalan sesuai keinginan.

Penutup

Background image dalam CSS bukan hanya sekadar elemen dekoratif, tetapi juga sebuah alat untuk meningkatkan estetika dan fungsi website kamu. Setiap aspek memiliki peranannya masing-masing dalam menciptakan tampilan yang harmonis dan menarik.

Selain itu, dengan memahami cara menghentikan pengulangan gambar dan memastikan konsistensi tampilan di berbagai browser, kamu akan lebih siap dalam menghadapi tantangan desain web yang dinamis.