Kupas Tuntas CSS background-position

CSS

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 top, bottom, right, left 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/

Artikel Terkait

Populer

;