Style atribut backgroundPosition

Definisi dan penggunaan

backgroundPosition Setel atau kembalikan posisi gambar latar belakang dalam elemen.

Lihat pula:

Gaya HTML:Atribut background

Panduan CSS:Latar Belakang CSS

Panduan CSS3:Latar belakang CSS3

Panduan CSS:Atribut background-image

Panduan CSS:Atribut background-position

Contoh

Contoh 1

Ubah posisi gambar latar belakang:

document.body.style.backgroundPosition = "top right";

Coba sendiri

Contoh 2

Ubah posisi gambar latar belakang dalam elemen <div> ke tengah bawah:

document.getElementById("myDiv").style.backgroundPosition = "center bottom";

Coba sendiri

Contoh 3

Ubah posisi gambar latar dalam elemen <div> ke horizontal 200 pixel dan vertikal 40 pixel:

document.getElementById("myDiv").style.backgroundPosition = "200px 40px";

Coba sendiri

Contoh 4

Kembalikan posisi gambar latar dalam elemen <div>:

document.getElementById("myDiv").style.backgroundPosition;

Coba sendiri

syntaks

Kembalikan atribut backgroundPosition:

objek.style.backgroundPosition

Atur atribut backgroundPosition:

objek.style.backgroundPosition = value

nilai atribut

nilai deskripsi
  • atas kiri
  • atas tengah
  • atas kanan
  • tengah kiri
  • tengah tengah
  • tengah kanan
  • bawah kiri
  • bawah tengah
  • bawah kanan
 Jika Anda hanya menentukan satu kata kunci, nilai lainnya akan adalah "center".
x% y%

Nilai x menunjukkan posisi horizontal, nilai y menunjukkan posisi vertikal.

Kotak atas kiri adalah 0%. Sisi bawah kanan adalah 100% 100%.

Jika Anda hanya menentukan satu nilai, nilai lainnya adalah 50%.
xpos ypos

Nilai x menunjukkan posisi horizontal, nilai y menunjukkan posisi vertikal.

Kotak atas kiri adalah 0 0. Unit dapat berupa pixel (0px 0px) atau setiap unit CSS lainnya.

Jika Anda hanya menentukan satu nilai, nilai lainnya adalah 50%. Anda dapat campurkan % dan unit.
initial Atur atribut ini ke nilai standarnya. Lihat initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit.

detil teknis

Nilai standar: 0% 0%
Nilai kembalian: string yang menunjukkan posisi gambar latar.
Versi CSS: CSS1

dukungan peramban

backgroundPosition adalah fitur CSS1 (1996).

Semua peramban mendukung penuhnya:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
dukung dukung dukung dukung dukung dukung