Thuộc tính background-position trong CSS

Thuộc tính background-position trong CSS xác định vị trí của hình nền. Các giá trị thường là một cặp chỉ tọa độ x, y. Giá trị mặc định là 0% 0%.

Thuộc tính background-position có thể nhận giá trị:

percent
none
length
top
center
bottom
left
right

Thuộc tính background-position có thể áp dụng cho:

Các phần tử Block-Level trong tài liệu.

Cú pháp thuộc tính background-position trong DOM

object.style.backgroundPosition = "10 30";

Ví dụ thuộc tính background-position trong CSS

Ví dụ sau minh họa cách thiết lập hình nền tại vị trí cách cạnh trái 100px.

<table style="background-image:url(/images/pattern1.gif);  background-position:100px;">
   <tr><td>
      Background image positioned 100 pixels away from the left.
   </td></tr>
</table>

Ví dụ tiếp theo minh họa cách xác định hình nền tại vị trí cách cạnh trái 100px và cách cạnh trên 200px.

<html>
   <head>
   </head>
   <body>
      <p style="background-image:url(../css/images/logo.png);  
         background-position:100px 200px;">
      Hinh nen cach canh trai 100 pixel va cach canh tren 200 pixel.
      </p>
   </body>
</html>

Quảng cáo

Kết quả là:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: