Performance sebuah web merupakan hal utama yang harus diperhatikan. Jika sebuah web atau aplikasi web loadingnya lambat alias lelet, maka user atau pengunjung pun akan ogah-ogahan untuk masuk ke web atau menjalankan aplikasi kita.
Di antara metode untuk meningkatkan performa dari sebuah website atau aplikasi web meringankan beban sebuah halaman web yaitu menggunakan seamless image yang berukuran sangat kecil yang diulang-ulang dengan memanfaatkan fitur CSS bernama background-property.
Berikut ini sedikit catatan untuk property CSS background-property:
Syntax CSS
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
Nilai Property
ValueDescription
repeat | Background image akan diulang baik vertikal maupun horizontal, dan ini merupakan defaultnya
repeat-x | Background image akan diulang hanya secara horizontal
repeat-y | Background image akan diulang hanya secara vertikal
no-repeat | Background image tidak akan diulang
initial | Set property ini menjadi nilai defaultnya
inherit | Menurunkan property dari element parent
Contoh Penggunaan CSS background-property di Web
Kita akan menggunakan gambar berikut sebagai background
Repeat-x
background-image: url("paper-small.jpg");
background-repeat: repeat-x;
1Repeat-y
background-image: url("paper-small.jpg");
background-repeat: repeat-y;
2Repeat Keduanya
background-image: url("paper-small.jpg");
background-repeat: repeat;
3Dengan memanfaatkan hal ini, akan sangat membantu dalam memanjakan user dan meningkatkan performa website dan aplikasi sesuai dengan design yang dibuat. Tentunya dengan mengkombinasi di berbagai area atau div di Web, sehingga penggunaan image pattern sebagai background dapat dioptimalkan penggunaannya.
Rekomendasi Sumber Pattern Image
Untuk kebutuhan ini, kami telah menulis artikel sebelumnya mengenai rekomendasi kami untuk mencari pattern image atau background yang bisa diperoleh secara gratis dan legal. Anda dapat membaca artikelnya di sini.
Semoga catatan ringan ini bisa bermanfaat.
Referensi
https://www.w3schools.com/
