Contoh
Bagaimana untuk posisi background-image:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Cobalah sendiri " Lebih "Try it Yourself" contoh di bawah ini.
Definisi dan Penggunaan
Properti background-position menetapkan posisi awal dari gambar latar belakang.
Tip: Secara default, latar belakang-gambar ditempatkan di sudut kiri atas unsur, dan diulang baik secara vertikal dan horizontal.
| nilai default: | 0% 0% |
|---|---|
| mewarisi: | no |
| animatable: | yes. Read about animatable Try it |
| Versi: | CSS1 |
| sintaks JavaScript: | object .style.backgroundPosition="center" Try it |
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
| Milik | |||||
|---|---|---|---|---|---|
| background-position | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: IE8 dan sebelumnya tidak mendukung beberapa gambar latar belakang pada satu elemen.
CSS Syntax
background-position:value;Nilai properti
| Nilai | Deskripsi | Mainkan |
|---|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom | Jika Anda hanya menentukan satu kata kunci, nilai lainnya akan "center" | Mainkan " |
| x% y% | Nilai pertama adalah posisi horizontal dan nilai kedua adalah vertikal. Pojok kiri atas adalah 0% 0%. Sudut kanan bawah adalah 100% 100%. Jika Anda hanya menentukan satu nilai, nilai lainnya akan menjadi 50%. . Nilai default adalah: 0% 0% | Mainkan " |
| xpos ypos | Nilai pertama adalah posisi horizontal dan nilai kedua adalah vertikal. Pojok kiri atas adalah 0 0 Unit dapat piksel (0px 0px) atau lainnya unit CSS . Jika Anda hanya menentukan satu nilai, nilai lainnya akan menjadi 50%. Anda dapat mencampur% dan posisi | Mainkan " |
| initial | Set properti ini ke nilai default. Baca tentang awal | Mainkan " |
| inherit | Mewarisi properti ini dari elemen induknya. Baca tentang mewarisi |
Contoh lebih
Contoh
Bagaimana posisi latar belakang-gambar menggunakan persen:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 30% 20%;
}
Cobalah sendiri " Contoh
Bagaimana posisi latar belakang-gambar menggunakan pixel:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 100px;
}
Cobalah sendiri " Pages terkait
CSS tutorial: CSS Background
Referensi CSS: background-image property
Referensi HTML DOM: backgroundPosition property