Blog

Kupas Tuntas CSS background-position

 

Kupas Tuntas CSS background-position

CSS     2 minggu yang lalu


background-position adalah properti CSS memungkinkan kita untuk menentukan di mana gambar latar belakang harus diposisikan dalam suatu elemen.

Properti posisi background dapat berisi nilai panjang, persentase atau keyword. Keyword yang tersedia adalah topbottomrightleft dan center. Keyword dapat digunakan dalam urutan apa pun, misalkan kita ingin posisi background di tengah bisa gunakan center.

Jika suatu elemen memiliki banyak background gambar, Anda dapat menentukan daftar nilai posisi background yang dipisahkan koma dalam urutan yang sama dengan background yang ditentukan.

Contoh menggunakan keyword:

.tipa-show-box {
  background-size: 25%;
  background-repeat: no-repeat;
  background-image:
    url(/images/police.svg),
    url(/images/doctor.svg),
    url(/images/pirate.svg),
    url(/images/cowboy.svg),
    url(/images/chef.svg);
  background-position:
    top left,
    top right,
    center,
    bottom,
    left bottom;
}

Contoh menggunakan presentase dan panjang:

.tipa-show-box2 {
  background-size: 25%;
  background-repeat: no-repeat;
  background-image:
    url(/images/police.svg),
    url(/images/doctor.svg),
    url(/images/pirate.svg),
    url(/images/cowboy.svg),
    url(/images/chef.svg);
  background-position:
    75% 0,
    100%,
    20px 20px,
    50%,
    0 90%;
}

Untuk URL backgroud image bisa diarakan dimana file Anda disimpan.

Semoga bermanfaat.

 

referensi: https://alligator.io/css/background-position-property/


Kami membuat aplikasi pelayanan kependudukan dan administrasi untuk Desa dan Kelurahan. Demo bisa diakses di https://dash.klandesa.com. Silahkan gunakan email: demo@klandesa.com dan password: 123456