CSS Background Position: Là Gì Và Hoạt Động Như Thế Nào?

Web developer dùng thuộc tính CSS background-position khi cần điều chỉnh vị trí bắt đầu của background image. Bài này tìm hiểu background-position và cách điều chỉnh để thay đổi vị trí ảnh.

Cú Pháp

Cú pháp background-position trong CSS selector:

background-position: value

Có vài cách khai báo value:

• Keyword pairs:
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom

Từ đầu = trục ngang (x), từ thứ hai = trục dọc (y). Chỉ khai báo một giá trị → y tự động là 'center'.

• x%, y%: Tương tự, tối đa 2 giá trị: một cho x-axis, một cho y-axis. Chỉ một giá trị → y% = 50% (center y-axis). Left top = 0% 0%, top right = 100% 0%, bottom left = 0% 100%, bottom right = 100% 100%.

• xpos, ypos (px/rem/em/pt): Tương tự nhưng dùng đơn vị CSS thay vì %. Có thể mix % và rem/em/px/pt. Không có giá trị thứ hai → ypos = 50%.

Ví dụ các giá trị dùng keyword (option 1):

Top Left:

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>Top Left</title> 
    <style> 
      body { 
        background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a..."); 
        background-repeat: no-repeat; 
        background-size: cover; 
        background-attachment: fixed; 
        background-position: top left; 
        display: flex; flex-flow: row wrap; 
      } 
      div { height: 200px; width: 25%; background: transparent; border: 5px double ivory; margin: 20px; } 
      #text-block { background: ivory; border: 5px double black; display: flex; align-items: center; justify-content: center; font-size: 2rem; } 
    </style> 
  </head> 
  <body> 
    <div></div> <div></div> <div></div> <div></div> 
    <div id="text-block"> top left </div> 
    <div></div> <div></div> <div></div> <div></div> 
    <script src="script.js"></script> 
  </body> 
</html>

Center Right:

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>Center Right</title> 
    <style> 
      body { 
        background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a..."); 
        background-repeat: no-repeat; 
        background-size: cover; 
        background-attachment: fixed; 
        background-position: center right; 
        display: flex; flex-flow: row wrap; 
      } 
      div { height: 200px; width: 25%; background: transparent; border: 5px double ivory; margin: 20px; } 
      #text-block { background: ivory; border: 5px double black; display: flex; align-items: center; justify-content: center; font-size: 2rem; } 
    </style> 
  </head> 
  <body> 
    <div></div> <div></div> <div></div> <div></div> 
    <div id="text-block"> center right </div> 
    <div></div> <div></div> <div></div> <div></div> 
    <script src="script.js"></script> 
  </body> 
</html>

Bottom Left:

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>Bottom Left</title> 
    <style> 
      body { 
        background: url("https://images.unsplash.com/photo-1585820809560-b6d13cf9794a..."); 
        background-repeat: no-repeat; 
        background-size: cover; 
        background-attachment: fixed; 
        background-position: bottom left; 
        display: flex; flex-flow: row wrap; 
      } 
      div { height: 200px; width: 25%; background: transparent; border: 5px double ivory; margin: 20px; } 
      #text-block { background: ivory; border: 5px double black; display: flex; align-items: center; justify-content: center; font-size: 2rem; } 
    </style> 
  </head> 
  <body> 
    <div></div> <div></div> <div></div> <div></div> 
    <div id="text-block"> bottom left </div> 
    <div></div> <div></div> <div></div> <div></div> 
    <script src="script.js"></script> 
  </body> 
</html>

Kết Luận

Hy vọng các code editor trên giúp bạn hiểu cách dùng background-position. Hãy thử nghiệm – đổi background image, đổi position – để khám phá thêm!