Atribut background-position CSS

Definisi dan penggunaan

background-position Properti menetapkan posisi awal gambar latar.

Properti ini menetapkan gambar latar asli (dari background-image Lokasi (definisi) dimana gambar latar jika diulang, akan dimulai dari titik ini.

Peringatan:Anda perlu mengatur properti background-attachment menjadi "tetapuntuk memastikan bahwa properti ini berfungsi dengan baik di Firefox dan Opera.

Lihat pula:

Panduan CSS:Latar Belakang CSS

Panduan CSS:Properti background-image

Panduan HTML DOM:Properti backgroundPosition

Contoh

Bagaimana untuk menempatkan gambar latar:

body
{ 
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

Coba sendiri

Sintaks CSS

background-position: value;

Nilai properti

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 menjadi "center".

Nilai standar: 0% 0%.
x% y%

Nilai pertama adalah posisi horizontal, nilai kedua adalah posisi vertikal.

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

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

Nilai pertama adalah posisi horizontal, nilai kedua adalah posisi vertikal.

Kotak atas kiri adalah 0 0. Satuan adalah pixel (0px 0px) atau satuan CSS lainnya.

Jika Anda hanya menentukan satu nilai, nilai lainnya akan menjadi 50%.

Anda dapat campurkan % dan nilai position.

Detil teknis

Nilai standar: 0% 0%
Inheritsi: no
Versi: CSS1
Sintaks JavaScript: object.style.backgroundPosition="center"

Beberapa contoh lain

Bagaimana untuk menempatkan gambar latar dengan %
Contoh ini menunjukkan bagaimana untuk menggunakan persen untuk menempatkan gambar latar di halaman.
Bagaimana untuk menempatkan gambar latar dengan pixel
Contoh ini menunjukkan bagaimana untuk menggunakan pixel untuk menempatkan gambar latar di halaman.

Dukungan browser

Tabel yang terdapat di sini menunjukkan versi pertama browser yang mendukung properti ini penuh.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5