Thuộc tính background-position trong CSS

Để dễ dàng tiếp thu bài hướng dẫn này thì trước tiên bạn cần xem qua:

Thuộc tính background-image trong CSS
Thuộc tính background-repeat trong CSS

1) Thuộc tính background-position trong CSS

- Thuộc tính background-position dùng để thiết lập "vị trí của hình nền" trong phần tử HTML.

- Ví dụ: Hình nền của phần tử bên dưới được thiết lập vị trí "center center"

(tức là hình nền sẽ được nằm ở giữa phần tử theo chiều ngang lẫn chiều dọc)

- Lưu ý: Thuộc tính background-position chỉ có tác dụng khi phần tử được thiết lập thuộc tính background-repeat với giá trị là no-repeat.

2) Cách sử dụng thuộc tính background-position trong CSS

- Để sử dụng thuộc tính background-position, ta dùng cú pháp như sau:

background-position: giá trị;

- Dưới đây là cách xác định & danh sách các "giá trị" được dùng cho thuộc tính background-position:

left top left center left bottom center top center center center bottom right top right center right bottom	- Xác định vị trí của hình nền dựa theo "tên vị trí" - Tên vị trí sẽ bao gồm hai giá trị: Giá trị thứ nhất xác định vị trí của hình nền theo chiều ngang, nó có thể là một trong ba giá trị: left, center, right Giá trị thứ hai xác định vị trí của hình nền theo chiều dọc, nó có thể là một trong ba giá trị: top, center, bottom - Ví dụ: Với giá trị "right top" thì hình nền sẽ nằm ở góc bên phải & phía trên của phần tử. - Lưu ý: Việc hoán đổi thứ tự giữa hai giá trị của tên vị trí là không quan trọng, điển hình "right top" cũng giống như "top right" - Lưu ý: Nếu tên vị trí chỉ chứa một giá trị thì giá trị còn lại sẽ mặc định là center, ví dụ "left" sẽ có nghĩa là "left center"	Xem ví dụ
xpx ypx	- Hình nền sẽ xuất hiện ở vị trí: Cách đường viền bên trái của phần tử một khoảng x pixel Cách đường viền phía trên của phần tử một khoảng y pixel - Lưu ý: Đối với cách xác định vị trí này, nếu ta chỉ đưa ra một giá trị thì giá trị còn lại sẽ là 50%, ví dụ giá trị "100px" sẽ tương đương với "100px 50%"	Xem ví dụ
x% y%	- Hình nền sẽ xuất hiện ở vị trí: Cách đường viền bên trái của phần tử một khoảng x % trên tổng số "chiều rộng của phần tử - chiều rộng của tấm hình" Cách đường viền phía trên của phần tử một khoảng y % trên tổng số "chiều cao của phần tử - chiều cao của tấm hình" - Ví dụ: Ta có một phần tử với kích thước là 800x450 và một tấm hình với kích thước 250x120. Nếu giá trị của thuộc tính background-position là 30% 20% thì hình nền sẽ xuất hiện ở vị trí: Cách đường viền bên trái của phần tử một khoảng 165px (Giải thích: 30%(800-250) = 165)* Cách đường viền phía trên của phần tử một khoảng 66px (Giải thích: 20%(450-120) = 66)* - Lưu ý: Đối với cách xác định vị trí này, nếu ta chỉ đưa ra một giá trị thì giá trị còn lại sẽ là 50%, ví dụ giá trị "30%" sẽ tương đương với "30% 50%"	Xem ví dụ
initial	- Sử dụng giá trị mặc định của nó. - Lưu ý: Mặc định thì hình nền sẽ xuất hiện ở góc phía trên bên trái của phần tử.	Xem ví dụ
inherit	- Kế thừa giá trị thuộc tính background-position phần tử cha của nó	Xem ví dụ