background-position trong css là gì

background-position trong CSS là thuộc tính dùng để xác định vị trí của hình nền trong một thành phần HTML. Nó có thể được xác định theo pixel hoặc theo tỷ lệ phần trăm. Ví dụ, background-position: top left sẽ đặt hình nền ở góc trên bên trái của thành phần, trong khi background-position: 50% 50% sẽ đặt hình nền ở giữa thành phần.

Các bài viết liên quan:

• CSS là gì? cách hoạt động và cách học CSS
• Kiểm tra lỗ hổng bảo mật CSS Injection
• Selenium IDE- xác định phần tử html cho testing website
• CSS trong React
• + trong css

Giới thiệu background-position trong CSS

background-position là một thuộc tính CSS được sử dụng để xác định vị trí hiển thị của hình nền trong phần tử HTML. Thuộc tính này cho phép người dùng xác định vị trí của hình nền đối với phần tử HTML, cụ thể là nó sẽ được hiển thị ở đâu trên trang web.

Với background-position, bạn có thể chọn một trong những giá trị sau:

• left
• center
• right
• top
• bottom
• x% y%: định vị trí với tọa độ x và y, trong đó x và y là phần trăm chiều rộng và chiều cao của phần tử HTML
• x_pos y_pos: định vị trí với tọa độ x và y, trong đó x_pos và y_pos được tính bằng đơn vị đo lường được chọn (px, em, rem, …)

background-position có thể được sử dụng với hình ảnh nền, màu nền và gradient.

Ví dụ:

background-image: url("image.jpg");
background-position: center;

Trong đoạn mã này, hình ảnh có đường dẫn là “image.jpg” sẽ được hiển thị ở giữa phần tử HTML.

Các thuộc tính của background-position trong CSS

Thuộc tính background-position trong CSS là một trong những thuộc tính quan trọng để xác định vị trí hiển thị của hình nền (background) của một phần tử HTML. Có hai giá trị chính cho thuộc tính này là background-position-x và background-position-y.

1. Giá trị background-position-x: xác định vị trí hiển thị theo chiều ngang của hình nền. Các giá trị có thể sử dụng cho background-position-x gồm:

• left: đặt hình nền ở bên trái.
• center: đặt hình nền ở giữa.
• right: đặt hình nền ở bên phải.
• Một giá trị số hoặc phần trăm: đặt hình nền ở vị trí được tính từ bên trái của phần tử HTML.

2. Giá trị background-position-y: xác định vị trí hiển thị theo chiều dọc của hình nền. Các giá trị có thể sử dụng cho background-position-y gồm:

• top: đặt hình nền ở đầu trên.
• center: đặt hình nền ở giữa.
• bottom: đặt hình nền ở đầu dưới.
• Một giá trị số hoặc phần trăm: đặt hình nền ở vị trí được tính từ đầu trên của phần tử HTML.

Cả hai giá trị này cũng có thể kết hợp với nhau để xác định vị trí chính xác của hình nền. Ví dụ, nếu muốn đặt hình nền ở giữa chiều ngang và đầu trên chiều dọc, ta có thể sử dụng giá trị center top cho thuộc tính background-position.

Ngoài ra, ta cũng có thể sử dụng giá trị số hoặc phần trăm cho cả hai chiều (x và y) để xác định vị trí chính xác của hình nền, ví dụ: background-position: 50% 50%;.

Xem thêm Xử lý File Python

Cách sử dụng background-position trong CSS

Để sử dụng background-position trong CSS, bạn có thể thêm thuộc tính này vào các phần tử HTML hoặc các định dạng CSS được áp dụng cho các phần tử HTML. Thuộc tính background-position được sử dụng để xác định vị trí hiển thị của hình nền trên phần tử HTML.

Cú pháp của background-position như sau:

background-position: x y;

Trong đó:

• x và y là các giá trị xác định vị trí của hình nền. Chúng có thể là các giá trị từ khóa, số nguyên hoặc phần trăm.

Có thể sử dụng một trong những giá trị sau đây cho x và y:

• left: Hiển thị hình nền ở vị trí bên trái của phần tử.
• right: Hiển thị hình nền ở vị trí bên phải của phần tử.
• center: Hiển thị hình nền ở giữa phần tử.
• top: Hiển thị hình nền ở vị trí trên cùng của phần tử.
• bottom: Hiển thị hình nền ở vị trí dưới cùng của phần tử.
• Số nguyên: Xác định vị trí của hình nền theo đơn vị pixel tính từ góc trên bên trái của phần tử. Ví dụ: 10px 20px sẽ đặt hình nền ở vị trí cách trái 10 pixel và cách trên 20 pixel.
• Phần trăm: Xác định vị trí của hình nền theo tỷ lệ phần trăm tính từ góc trên bên trái của phần tử. Ví dụ: 50% 75% sẽ đặt hình nền ở vị trí cách trái 50% và cách trên 75% so với phần tử.

Ngoài ra, bạn có thể sử dụng các giá trị kết hợp để xác định vị trí của hình nền. Ví dụ: right bottom, center top, 10px center,…

Ví dụ:

div {
  background-image: url("background.jpg");
  background-position: center;
}

Đoạn mã này sẽ đặt hình nền background.jpg ở giữa phần tử div.

Xem thêm Chuỗi tùy chọn Swift

Những lưu ý khi sử dụng background-position trong CSS

Khi sử dụng background-position trong CSS, có một số lưu ý sau đây cần lưu ý để đảm bảo tốt nhất cho hiệu quả của thiết kế:

1. Thứ tự của giá trị background-position phải được đặt theo thứ tự “ngang – dọc” (hoặc “trái – phải” – “trên – dưới”).
2. Luôn đặt giá trị theo cặp giá trị “px” hoặc “em” để đảm bảo chính xác vị trí hiển thị của hình ảnh.
3. Khi sử dụng background-position với giá trị dạng phần trăm (%), vị trí của hình ảnh sẽ thay đổi tùy thuộc vào kích thước của phần tử cha.
4. Background-position có thể được sử dụng với các thuộc tính khác của CSS như background-image, background-repeat để tạo ra hiệu ứng tùy chỉnh cho thiết kế.
5. Nếu không có giá trị background-repeat được đặt, hình ảnh sẽ được lặp lại để phủ đầy toàn bộ phần tử cha.
6. Khi sử dụng background-position trong các thiết kế responsive, cần đảm bảo rằng vị trí của hình ảnh sẽ được thay đổi tùy thuộc vào kích thước màn hình và thiết bị sử dụng.
7. Nếu sử dụng background-position để hiển thị hình ảnh động, cần sử dụng các công cụ như CSS animations hoặc JavaScript để tạo ra các hiệu ứng chuyển động mượt mà và đáp ứng nhu cầu của người dùng.

Xem thêm Xử lý và sử dụng chuỗi trong ngôn ngữ SAS

Một số ví dụ về background-position trong css

Dưới đây là một số ví dụ về cách sử dụng thuộc tính background-position trong CSS:

1. Đặt hình nền ở góc trên bên trái của thành phần:

background-position: top left;

2. Đặt hình nền giữa thành phần:

background-position: center center;

3. Đặt hình nền 10 pixel từ trái và 20 pixel từ trên:

background-position: 10px 20px;

4. Đặt hình nền tại vị trí 50% từ trục x và 25% từ trục y:

background-position: 50% 25%;

5. Đặt hình nền tại vị trí bên trái và 50% từ trục y:

background-position: left 50%;

6. Đặt hình nền tại vị trí 20% từ trục x và bên dưới:

background-position: 20% bottom;

7. Đặt hình nền tại vị trí bên trái và giữa của thành phần:

background-position: left center;

Lưu ý: Các ví dụ trên chỉ là một số ví dụ cơ bản về việc sử dụng thuộc tính background-position trong CSS, bạn có thể sử dụng nó theo cách khác nhau để đạt được hiệu quả thiết kế mong muốn.

Xem thêm Debugging JavaScript trong Web Browser