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.
body { background-image: url('logo.png'); background-repeat: no-repeat; background-attachment: fixed; background-position: center;}
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ôngAnimatable:Có. Tìm hiểu về Thuộc tính AnimatableVersion:CSS1Cú pháp JavaScript:object.style.backgroundPosition=”center”Trình duyệt hỗ trợ Background-positionThuộc tính background-position1.04.01.01.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
background-position: value;
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 bottomNế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 yposGiá 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.inheritKế 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 online, hướng dẫn học CSS
Tác giá: Hoàng Luyến
