Tidadigi Logo

CSS background-position Property

Thuộc tính CSS background-position đặt vị trí bắt đầu của ảnh nền trong một phần tử. Nó cho phép bạn dùng từ khóa, phần trăm hoặc giá trị để kiểm soát vị trí ảnh.

Thuộc tính này giúp tùy chỉnh bố cục trực quan bằng cách căn chỉnh chính xác ảnh nền. Nó giúp nâng cao thiết kế tổng thể và giao diện trang web của bạn.

Cú pháp

element {
    background-position: value;
}

Lưu ý: Thuộc tính background-image được đặt mặc định ở góc trên bên trái. Ảnh nền sẽ lặp lại theo cả chiều ngang và chiều dọc.

Thuộc tính background-position là gì?

Thuộc tính background-position trong CSS xác định vị trí ban đầu của ảnh nền. Ảnh nền mặc định được đặt ở góc trên bên trái phần tử. Tuy nhiên với background-position bạn có thể kiểm soát vị trí chính xác ảnh. Điều này cung cấp sự linh hoạt trong thiết kế và bố cục.

Giá trị thuộc tính:

Dưới đây là bảng định dạng cho các giá trị thuộc tính CSS background-position và mô tả của chúng:

Thuộc tínhMô tả
background-position: left top;Đặt ảnh ở góc trên bên trái.
background-position: left center;Căn chỉnh ảnh ở giữa bên trái.
background-position: left bottom;Đặt ảnh ở góc dưới bên trái.
background-position: center top;Đặt ảnh ở giữa phía trên.
background-position: center center;Căn giữa ảnh theo cả chiều ngang và chiều dọc.
background-position: center bottom;Căn chỉnh ảnh ở giữa phía dưới.
background-position: right top;Đặt ảnh ở góc trên bên phải.
background-position: right center;Căn chỉnh ảnh ở giữa bên phải.
background-position: right bottom;Đặt ảnh ở góc dưới bên phải.
background-position: 25% 75%;Đặt ảnh cách 25% từ bên trái và 75% từ phía trên.
background-position: 30px 80px;Đặt ảnh cách 30px từ bên trái và 80px từ phía trên.

Hãy cùng thảo luận chi tiết từng thuộc tính:

. background-position: left top

Thuộc tính background-position: left top; đặt ảnh nền ở góc trên bên trái phần tử. Ảnh được căn chỉnh với cạnh trên và cạnh trái phần tử.

Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính background-position khi giá trị vị trí được đặt ở phía trên bên trái.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title> CSS background-position Property </title>
    <style>
        body {
            background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: left top;
        }
    </style>
</head>

</html>

Kết quả:

css-background-position-property

. background-position: left center

Thuộc tính background-position: left center; đặt ảnh nền ở giữa bên trái phần tử. Ảnh được căn chỉnh theo chiều dọc và chiều ngang bên trái.

Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính background-position khi giá trị vị trí được đặt ở giữa bên trái.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title> CSS background-position Property </title>
    <style>
        body {
            background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: left center;
        }
    </style>
</head>

</html>

Kết quả:

css-background-position-property

. background-position: left bottom

Thuộc tính background-position: left bottom; đặt ảnh nền ở góc dưới bên trái của phần tử. Nó căn chỉnh ảnh với cạnh dưới và cạnh trái của phần tử.

Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính background-position khi giá trị vị trí được đặt ở vị trí dưới cùng bên trái.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title> CSS | background-position Property </title>
    <style>
        body {
            background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: left bottom;
        }
    </style>
</head>

</html>

Kết quả:

css-background-position-property

. background-position: center top

Thuộc tính background-position: center top; đặt ảnh nền ở giữa phía trên của phần tử. Nó căn chỉnh ảnh theo chiều ngang và mép trên.

Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính background-position khi giá trị vị trí được đặt ở vị trí giữa phía trên.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title> CSS | background-position Property </title>
    <style>
    body {
        background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center top;
    }
    </style>
</head>

</html>

Kết quả:

css-background-position-property

. background-position: center center

Thuộc tính background-position: center center; đặt ảnh nền ở chính giữa phần tử. Nó căn chỉnh ảnh theo cả chiều ngang và chiều dọc.

Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính background-position khi giá trị vị trí được đặt ở vị trí giữa trung tâm.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title> CSS | background-position Property </title>
    <style>
    body {
        background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
    }
    </style>
</head>

</html>

Kết quả:

css-background-position-property

. background-position: center bottom

Thuộc tính background-position: center bottom; đặt ảnh nền ở giữa phía dưới của phần tử. Nó căn chỉnh ảnh theo chiều ngang và mép dưới.

Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính background-position khi giá trị vị trí được đặt ở vị trí giữa phía dưới.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title> CSS | background-position Property </title>
    <style>
    body {
        background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center bottom;
    }
    </style>
</head>

</html>

Kết quả:

css-background-position-property

. background-position: right top

Thuộc tính background-position: right top; đặt ảnh nền ở góc trên bên phải của phần tử. Nó căn chỉnh ảnh với cạnh trên và cạnh phải của phần tử.

Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính background-position khi giá trị vị trí được đặt ở vị trí trên cùng bên phải.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title> CSS | background-position Property </title>
    <style>
    body {
        background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: right top;
    }
    </style>
</head>

</html>

Kết quả:

css-background-position-property

. background-position: right center

Thuộc tính `background-position: right center;` đặt ảnh nền ở giữa bên phải phần tử. Ảnh được căn chỉnh theo chiều dọc và chiều ngang bên phải.

Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính background-position khi giá trị vị trí được đặt ở vị trí giữa bên phải.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title> CSS | background-position Property </title>
    <style>
    body {
        background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: right center;
    }
    </style>
</head>

</html>

Kết quả:

css-background-position-property

. background-position: right bottom

Thuộc tính background-position: right bottom; đặt ảnh nền ở góc dưới bên phải của phần tử. Nó căn chỉnh ảnh với cạnh dưới và cạnh phải của phần tử.

Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính background-position khi giá trị vị trí được đặt ở vị trí dưới cùng bên phải.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title> CSS | background-position Property </title>
    <style>
    body {
        background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: right bottom;
    }
    </style>
</head>

</html>

Kết quả:

css-background-position-property

. background-position: X% Y%

Thuộc tính background-position: X% Y%; đặt vị trí ảnh nền bằng giá trị phần trăm. X% biểu thị vị trí ngang và Y% biểu thị vị trí dọc. Vị trí này tương ứng góc trên bên trái của phần tử.

Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính background-position khi giá trị vị trí được đặt ở dạng phần trăm.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title> CSS | background-position Property </title>
    <style>
    body {
        background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: 25% 75&;
    }
    </style>
</head>

</html>

Kết quả:

css-background-position-property

. background-position: Xpx Ypx

Thuộc tính background-position: Xpx Ypx; đặt vị trí ảnh nền bằng giá trị pixel. Xpx chỉ định vị trí ngang và Ypx chỉ định vị trí dọc. Vị trí này được tính từ góc trên bên trái của phần tử.

Ví dụ: Ví dụ này minh họa việc sử dụng thuộc tính background-position khi giá trị vị trí được đặt ở dạng pixel.

HTML 
<!DOCTYPE html>
<html>
  
<head>
    <title> CSS | background-position Property </title>
    <style>
    body {
        background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/background-position1.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: 30px 80px;
    }
    </style>
</head>

</html>

Kết quả:

css-background-position-property

Trình duyệt được hỗ trợ

Các trình duyệt được hỗ trợ bởi thuộc tính background-position được liệt kê dưới đây:

Lưu ý: Sau các bản cập nhật gần đây, tất cả các trình duyệt chính đều hỗ trợ background-position. Không có trình duyệt nào không hỗ trợ thuộc tính này.


Last Updated : 21/07/2025