Thuộc tính background-position CSS

Định nghĩa và cách sử dụng

background-position Thuộc tính này thiết lập vị trí bắt đầu của hình nền.

Thuộc tính này thiết lập hình nền gốc (bởi background-image Định nghĩa) vị trí, nếu hình nền cần lặp lại, sẽ bắt đầu từ điểm này.

Lưu ý:Bạn cần phải đặt thuộc tính background-attachment thành "fixedcần thiết phải đặt thuộc tính background-attachment thành "

Xem thêm:

Hướng dẫn CSS:BG của CSS

Hướng dẫn tham khảo CSS:Thuộc tính background-image

Hướng dẫn tham khảo HTML DOM:Thuộc tính backgroundPosition

Ví dụ

Cách định vị ảnh nền:

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

Thử ngay

Ngôn ngữ CSS

background-position: value;

Giá trị thuộc tính

Giá trị Mô tả
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

Nếu bạn chỉ quy định một từ khóa, giá trị còn lại sẽ là "center".

Giá trị mặc định: 0% 0%.
x% y%

Giá trị đầu tiên là vị trí ngang, giá trị thứ hai là vị trí dọc.

Góc trên cùng bên trái là 0% 0%. Góc dưới cùng bên phải là 100% 100%.

Nếu bạn chỉ quy định một giá trị, giá trị còn lại sẽ là 50%.
xpos ypos

Giá trị đầu tiên là vị trí ngang, giá trị thứ hai là vị trí dọc.

Góc trên cùng bên trái là 0 0. Đơn vị là pixel (0px 0px) hoặc bất kỳ đơn vị CSS nào khác.

Nếu bạn chỉ quy định một giá trị, giá trị còn lại sẽ là 50%.

Bạn có thể kết hợp sử dụng % và giá trị position.

Chi tiết kỹ thuật

Giá trị mặc định: 0% 0%
Thừa kế: no
Phiên bản: CSS1
Ngôn ngữ lập trình JavaScript: object.style.backgroundPosition="center"

Các ví dụ khác

Cách sử dụng % để định vị ảnh nền
Ví dụ này minh họa cách sử dụng phần trăm để định vị ảnh nền trên trang.
Cách sử dụng pixel để định vị ảnh nền
Ví dụ này minh họa cách sử dụng pixel để định vị ảnh nền trên trang.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5