Pengertian HTML dan Fungsinya
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
| Value | Description |
|---|---|
| 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;
Repeat-y
background-image: url("paper-small.jpg");
background-repeat: repeat-y;
Repeat Keduanya
background-image: url("paper-small.jpg");
background-repeat: repeat;
Dengan 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/
Related posts
