Hoàng Luyến

Hoàng Luyến

Administrator

Thuộc tính Background-position trong CSS


Background-position là thuộc tính xác định vị trí của ảnh nền trên  phần tử, giá trị mặc định của nó ở góc trên và từ mép trái của phần tử.  Nói một cách khác nó hỗ trợ thuộc tính background-image xác định vị trí ảnh nền.

Ví dụ: logo.png được đặt ở giữa màn hình không lặp, nằm cố định ở giữa trang.

Chạy thử với trình
Soạn thảo css online

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

Thuộc tính background-position đặt vị trí bắt đầu của một hình ảnh nền.

Mẹo: Theo mặc định, một background-image được đặt ở góc trên bên trái của một phần tử, và lặp đi lặp lại cả theo chiều dọc và chiều ngang.

Giá trị mặc định: 0% 0%
Tính kế thừa: Không
Animatable: Có. Tìm hiểu về Thuộc tính Animatable
Version: CSS1
Cú pháp JavaScript: object.style.backgroundPosition=”center”

Trình duyệt hỗ trợ Background-position
Thuộc tính          
background-position 1.0 4.0 1.0 1.0  3.5

Lưu ý: IE8 và cũ hơn không hỗ trợ nhiều hình ảnh nền trên một phần tử.


Cú pháp CSS Background-position

Các giá trị thuộc tính

Các giá trị Mô tả
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Nếu bạn chỉ định một từ khóa, các giá trị khác sẽ là trung tâp có giá trị “center”
x% y% Giá trị đầu tiên là vị trí nằm ngang và giá trị thứ hai là thẳng đứng. Góc trên bên trái là 0% 0%. Góc dưới bên phải là 100% 100%. Nếu bạn chỉ định một giá trị, các giá trị khác sẽ là 50%. Giá trị mặc định là: 0% 0%
xpos ypos Giá trị đầu tiên là vị trí nằm ngang và giá trị thứ hai là thẳng đứng. Góc trên bên trái là 0 0. Các đơn vị có thể được pixels (0px 0px) hoặc bất kỳ đơn vị CSS khác. Nếu bạn chỉ định một giá trị, các giá trị khác sẽ là 50%. Bạn có thể kết hợp% và vị trí
initial Đặt thuộc tính này là giá trị mặc định.
inherit Kế thừa các thuộc tính này từ phần tử cha của nó

 

» Trở về xem bài học CSS onlinehướng dẫn học CSS

Tác giá: Hoàng Luyến

Trang chủ

Thuộc tính Background-position trong CSS
Đánh giá bài viết


Viết bình luận

Tất cả bình luận

Thật tuyệt vời nếu bài viết này nhận được ý kiến của bạn. *

SEO