Thuộc tính background-position-x

Thuộc tính background-position-x xác định vị trí của hình nền phần tử theo chiều ngang.

Thuộc tính có thể nhận các giá trị sau: left, center, right, và cũng có thể chỉ định vị trí của nền theo phần trăm hoặc pixel.

Cú pháp

bộ chọn {
	background-position-x: giá trị;
}

Ví dụ

Hãy đặt hình nền ở bên trái theo chiều ngang:

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

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

Ví dụ

Bây giờ hãy di chuyển nền sang bên phải:

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

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

Ví dụ

Hãy đặt hình nền ở giữa:

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

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

Ví dụ

Bây giờ hãy chỉ định vị trí cho nền bằng phần trăm:

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

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

Xem thêm

thuộc tính background,
đại diện cho thuộc tính viết tắt cho nền
thuộc tính background-position-y,
xác định vị trí nền theo chiều dọc