Thuộc tính background-position

Thuộc tính background-position xác định vị trí của hình ảnh nền phần tử. Vị trí có thể được xác định bằng bất kỳ đơn vị kích thước nào. Giá trị đầu tiên biểu thị khoảng cách lề trái, giá trị thứ hai - khoảng cách lề trên.

Cũng có thể xác định vị trí bằng các từ khóa. Trong trường hợp này thứ tự các giá trị không quan trọng. Từ khóa cho chiều dọc: top, center, bottom. Từ khóa cho chiều ngang: left, center, right.

Cách sử dụng từ khóa

Để đặt hình ảnh bằng từ khóa, cần chỉ định một giá trị cho chiều dọc và một cho chiều ngang. Ví dụ, nếu chỉ định giá trị top right, hình ảnh sẽ nằm ở trên cùng bên phải.

Thứ tự từ không quan trọng: có thể viết top right, hoặc - right top. Nếu có từ khóa center - có thể bỏ qua nó. Ví dụ, top center, cũng giống như chỉ top. Còn center center cũng giống như chỉ center.

Cú pháp

bộ chọn {
	background-position: hai giá trị cách nhau bằng khoảng trắng;
}

Ví dụ

Theo mặc định, hình nền sẽ nằm ở góc trên bên trái:

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

#elem {
	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 vào góc trên bên phải:

<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;
}

Ví dụ

Hãy đặt hình nền vào góc dưới bên phải:

<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;
}

Ví dụ

Hãy đặt hình nền ở bên phải và căn giữa theo chiều dọc:

<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;
}

Ví dụ

Hãy đặt hình nền vào giữa khối:

<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;
}

Ví dụ

Hãy đặt hình nền ở khoảng cách 20px từ trái và 40px từ trên:

<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;
}

Ví dụ

Hãy đặt hình nền ở khoảng cách 90% từ trái và 100% từ trên:

<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;
}

Ví dụ

Hãy đặt hình nền ở khoảng cách 30px từ trái và ở dưới cùng theo chiều dọc:

<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;
}

Ví dụ

Hãy đặt hình nền ở khoảng cách 30px từ trái và căn giữa theo chiều dọc:

<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;
}

Ví dụ

Hãy đặt hình nền ở khoảng cách 30px từ trên và căn giữa theo chiều ngang:

<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;
}

Xem thêm

thuộc tính background,
là thuộc tính viết tắt cho nền