Ciri background-position

Ciri background-position menentukan kedudukan imej latar belakang elemen. Kedudukan boleh ditentukan menggunakan sebarang unit untuk saiz. Nilai pertama menandakan jarak dari kiri, nilai kedua - jarak dari atas.

Kedudukan juga boleh ditentukan menggunakan kata kunci. Dalam kes ini, susunan nilai tidak penting. Kata kunci untuk menegak: top, center, bottom. Kata kunci untuk mendatar: left, center, right.

Bagaimana menggunakan kata kunci

Untuk meletakkan imej menggunakan kata kunci, anda perlu nyatakan satu nilai untuk menegak dan satu untuk mendatar. Sebagai contoh, jika dinyatakan nilai top right, imej akan berada di atas kanan.

Susunan kata tidak penting: boleh tulis top right, atau - right top. Jika ada kata kunci center - ia boleh ditinggalkan. Contohnya, top center, adalah sama dengan hanya top. Dan center center sama dengan hanya center.

Sintaks

selector {
	background-position: dua nilai dipisahkan oleh ruang;
}

Contoh

Secara lalai, imej latar belakang akan berada di penjuru 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 imej latar belakang di penjuru 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 imej latar belakang di penjuru 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 imej latar belakang di kanan dan di tengah secara menegak:

<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 imej 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 imej 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 imej 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 imej latar belakang pada jarak 30px dari kiri dan di bawah secara menegak:

<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 imej latar belakang pada jarak 30px dari kiri dan di tengah secara menegak:

<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 imej latar belakang pada jarak 30px dari atas dan di tengah secara mendatar:

<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

ciri background,
yang merupakan ciri singkatan untuk latar belakang