Thuộc tính backgroundPosition của Style

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

backgroundPosition Cài đặt thuộc tính hoặc trả về vị trí ảnh nền trong phần tử.

Xin xem thêm:

Kiểu HTML:Thuộc tính background

Giáo trình CSS:CSS nền

Giáo trình CSS3:Bối cảnh CSS3

Tài liệu tham khảo CSS:Thuộc tính background-image

Tài liệu tham khảo CSS:Thuộc tính background-position

Mô hình

Ví dụ 1

Chỉnh sửa vị trí ảnh nền:

document.body.style.backgroundPosition = "top right";

Thử ngay

Ví dụ 2

Chỉnh sửa vị trí ảnh nền của phần tử <div> thành giữa dưới:

document.getElementById("myDiv").style.backgroundPosition = "center bottom";

Thử ngay

Ví dụ 3

Thay đổi vị trí hình ảnh nền trong phần tử <div> thành ngang 200 pixel và dọc 40 pixel:

document.getElementById("myDiv").style.backgroundPosition = "200px 40px";

Thử ngay

Ví dụ 4

Trả về vị trí hình ảnh nền trong phần tử <div>:

document.getElementById("myDiv").style.backgroundPosition;

Thử ngay

Cú pháp

Trả về thuộc tính backgroundPosition:

object.style.backgroundPosition

Đặt thuộc tính backgroundPosition:

object.style.backgroundPosition = 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".
x% y%

Giá trị x biểu thị vị trí ngang, giá trị y biểu thị 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ị x biểu thị vị trí ngang, giá trị y biểu thị vị trí dọc.

Góc trên cùng bên trái là 0 0. Đơn vị có thể 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 % và đơn vị.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Kế thừa thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: 0% 0%
Giá trị trả về: chuỗi, biểu thị vị trí của hình ảnh nền.
Phiên bản CSS: CSS1

hỗ trợ trình duyệt

backgroundPosition là tính năng CSS1 (1996).

Tất cả các trình duyệt đều hỗ trợ hoàn toàn nó:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
hỗ trợ hỗ trợ hỗ trợ hỗ trợ hỗ trợ hỗ trợ