Properti posisi latar belakang CSS

Sebelumnya _ Referensi CSS Lengkap Selanjutnya _

Contoh

Cara memposisikan gambar latar:

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

Lebih banyak contoh "Coba Sendiri" di bawah ini.

Definisi dan Penggunaan

Properti background-positionmenetapkan posisi awal gambar latar belakang.

Tip: Secara default, gambar latar ditempatkan di sudut kiri atas elemen, dan diulang baik secara vertikal maupun horizontal.

Nilai bawaan:	0% 0%
Diwarisi:	tidak
Animasi:	Ya. Baca tentang animasi
Versi: kapan:	CSS1
Sintaks JavaScript:	objek .style.backgroundPosition="center"

Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.

Property
background-position	1.0	4.0	1.0	1.0	3.5

Catatan: IE8 dan sebelumnya tidak mendukung banyak gambar latar belakang pada satu elemen.

Sintaks CSS

background-position: value;

Nilai properti

Value	Description	Play it
left top left center left bottom right top right center right bottom center top center center center bottom	If you only specify one keyword, the other value will be "center"
x% y%	The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0%
xpos ypos	The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Lebih Banyak Contoh

Contoh

Cara memposisikan gambar latar untuk dipusatkan di atas:

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

Contoh

Cara memposisikan gambar latar ke kanan bawah:

body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
}

Contoh

Cara memposisikan gambar latar menggunakan persen:

body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}

Contoh

Cara memposisikan gambar latar menggunakan piksel:

body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 150px;
}

Contoh

Gunakan properti latar belakang yang berbeda untuk membuat gambar "pahlawan":

.hero-image {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}