Contoh
Mengubah posisi dari background-image:
document.body.style.backgroundPosition = "top right"; Cobalah sendiri " Lebih "Try it Yourself" contoh di bawah ini.
Definisi dan Penggunaan
The backgroundPosition set properti atau mengembalikan posisi dari background-image dalam sebuah elemen.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
| Milik | |||||
|---|---|---|---|---|---|
| backgroundPosition | 1.0 | 4.0 | 1.0 | 1.0 | 3,5 |
Sintaksis
Kembali properti backgroundPosition:
object .style.backgroundPosition
Mengatur properti backgroundPosition:
object .style.backgroundPosition= value Nilai properti
| Nilai | Deskripsi |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right | Jika Anda hanya menentukan satu kata kunci, nilai lainnya akan "center" . |
| x% y% | Nilai x menunjukkan posisi horizontal dan nilai y menunjukkan posisi vertikal. Pojok kiri atas adalah 0% 0%. Sudut kanan bawah adalah 100% 100%. Jika Anda hanya menentukan satu nilai, nilai lainnya akan menjadi 50%. |
| xpos ypos | Nilai x menunjukkan posisi horizontal dan nilai y menunjukkan posisi vertikal. Pojok kiri atas adalah 0 0 Unit dapat piksel (0px 0px) atau unit CSS lainnya. Jika Anda hanya menentukan satu nilai, nilai lainnya akan menjadi 50%. Anda dapat mencampur% dan unit |
| initial | Set properti ini ke nilai default. Baca tentang awal |
| inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Rincian teknis
| Nilai default: | 0% 0% |
|---|---|
| Kembali Nilai: | Sebuah String, yang mewakili posisi dari background-image |
| CSS Versi | CSS1 |
Contoh lebih
Contoh
Ubah posisi background-image dalam <div> elemen ke tengah bawah:
document.getElementById("myDiv").style.backgroundPosition = "center bottom"; Cobalah sendiri " Contoh
Ubah posisi background-image dalam <div> elemen 200px horizontal dan vertikal 40px:
document.getElementById("myDiv").style.backgroundPosition = "200px 40px";
Cobalah sendiri " Contoh
Kembali posisi background-image dalam <div> elemen:
document.getElementById("myDiv").style.backgroundPosition;
Cobalah sendiri " Pages terkait
CSS tutorial: CSS Background
Referensi CSS: background-image property
Referensi CSS: background-position property
Referensi HTML DOM: background property
<Style Object