+62 812 1787 2769purnamakreatifa@gmail.comMonday – Friday 8 AM – 4 PM; Saturday 8 AM - 1 PM
FacebookTwitterPinterestInstagram
Purnama Kreatifa
Purnama Kreatifa
Sidoarjo, Jawa Timur, Indonesia
  • HOME
  • ABOUT US
  • SERVICES
  • BLOG
  • Portfolio
    • Software
    • Networking
  • OUR CLIENTS
  • CONTACT
  • HOME
  • ABOUT US
  • SERVICES
  • BLOG
  • Portfolio
    • Software
    • Networking
  • OUR CLIENTS
  • CONTACT

Mengoptimalkan Property CSS Repeat Image dalam Web

June 17, 2017programmingBy Rifqi Izzatur

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
paper-small

Repeat-x

background-image: url("paper-small.jpg");
background-repeat: repeat-x;

repeatx


 

 

Repeat-y

background-image: url("paper-small.jpg");
background-repeat: repeat-y;

repeaty


 

Repeat Keduanya

background-image: url("paper-small.jpg");
background-repeat: 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/

 

About the author

Rifqi Izzatur

Related posts
Pengertian HTML dan Fungsinya
June 27, 2019
Cara mengimpor dan mengekspor Database OrientDB di Ubuntu 14.04
July 11, 2018
Cara Menghapus Kolom Komentar di Blog WordPress
May 15, 2018
Sumber Pattern Image Legal dan Gratis untuk Background Web
June 17, 2017
Bagaimana Cara Menggunakan PostgreSQL dengan Aplikasi Django di Ubuntu 16.04?
June 12, 2017
Kemampuan Programming Paling Dibutuhkan Didunia
June 9, 2017
Leave Comment

Cancel reply

Your email address will not be published. Required fields are marked *

clear formSubmit

Recent Posts
  • Pengertian HTML dan Fungsinya
  • Kelebihan Jaringan 5G
  • Blokir Website & File Extention Dengan Web Proxy
  • Macam-macam Linux
  • Cara Mengubah Linux CLI ke GUI dan sebaliknya
Recent Comments
  • Tantri on PERBAIKAN KOMPUTER
  • Fatik on Perintah dasar di cmd (command promt ) dan linux
  • Bablofil on Hardisk kapasitasnya tidak sesuai ? Ini Penjelasannya
  • Crissy on Framework 7 – Bikin aplikasi Android & iOS dengan HTML, CSS, dan Javascript
  • Addrienne on Bahasa pemrograman populer untuk web development
Archives
  • June 2019
  • July 2018
  • June 2018
  • May 2018
  • July 2017
  • June 2017
  • May 2017
  • March 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • April 2016
Categories
  • Android
  • hardware
  • informasi
  • kreatif
  • Networking
  • programming
  • Server
  • software
  • teknologi
  • Uncategorized
© 2017 All Rights Reserved. CV Purnama Kreatifa