Properti background-position

Properti background-position menentukan posisi gambar latar belakang elemen. Posisi dapat ditentukan menggunakan satuan untuk ukuran apa pun. Nilai pertama menunjukkan jarak dari kiri, nilai kedua - jarak dari atas.

Posisi juga dapat ditentukan dengan kata kunci. Dalam hal ini, urutan nilai tidak penting. Kata kunci untuk vertikal: top, center, bottom. Kata kunci untuk horizontal: left, center, right.

Cara menggunakan kata kunci

Untuk menempatkan gambar dengan kata kunci, Anda perlu menentukan satu nilai untuk vertikal dan satu untuk horizontal. Misalnya, jika ditentukan nilai top right, maka gambar akan berada di atas kanan.

Urutan kata tidak penting: bisa ditulis top right, atau - right top. Jika ada kata kunci center - kata ini bisa dihilangkan. Misalnya, top center, sama dengan hanya top. Dan center center sama dengan hanya center.

Sintaks

selector {
	background-position: dua nilai dipisahkan spasi;
}

Contoh

Secara default, gambar latar belakang akan berada di pojok kiri atas:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Contoh

Mari letakkan gambar latar belakang di pojok kanan atas:

<div id="elem"></div>

#elem {
	background-position: top right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Contoh

Mari letakkan gambar latar belakang di pojok kanan bawah:

<div id="elem"></div>

#elem {
	background-position: bottom right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Contoh

Mari letakkan gambar latar belakang di kanan dan di tengah secara vertikal:

<div id="elem"></div>

#elem {
	background-position: right center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Contoh

Mari letakkan gambar latar belakang di tengah blok:

<div id="elem"></div>

#elem {
	background-position: center center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Contoh

Mari letakkan gambar latar belakang pada jarak 20px dari kiri dan 40px dari atas:

<div id="elem"></div>

#elem {
	background-position: 20px 40px;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Contoh

Mari letakkan gambar latar belakang pada jarak 90% dari kiri dan 100% dari atas:

<div id="elem"></div>

#elem {
	background-position: 90% 100%;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Contoh

Mari letakkan gambar latar belakang pada jarak 30px dari kiri dan di bawah secara vertikal:

<div id="elem"></div>

#elem {
	background-position: 30px bottom;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Contoh

Mari letakkan gambar latar belakang pada jarak 30px dari kiri dan di tengah secara vertikal:

<div id="elem"></div>

#elem {
	background-position: 30px center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Contoh

Mari letakkan gambar latar belakang pada jarak 30px dari atas dan di tengah secara horizontal:

<div id="elem"></div>

#elem {
	background-position: center 30px;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Lihat juga

properti background,
yang merupakan properti singkatan untuk latar belakang