Ảnh nền CSS: background-size, position, repeat và cover

Cách thêm ảnh nền

background-image vẽ một ảnh phía sau nội dung, padding và đường viền của phần tử. Theo mặc định, ảnh bắt đầu ở góc trên bên trái của vùng padding, giữ kích thước gốc và lặp lại để lấp đầy hộp:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background image</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dots {
      /* a 24x24 image: one blue dot */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%232563eb'/%3E%3C/svg%3E");
      height: 120px;
      padding: 16px;
      border: 2px solid #111827;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <div class="dots">One 24px image, repeated to fill the box</div>
</body>
</html>

Trong dự án thực tế, url() trỏ tới một tệp: url("images/hero.jpg"). Đường dẫn tính tương đối theo stylesheet chứa nó (hoặc theo trang, với phần tử <style>). Các ví dụ trên trang này dùng ảnh SVG nhỏ viết thẳng dưới dạng URL data: để chạy được ở bất kỳ đâu.

Hai điều cần biết ngay từ đầu:

• Nền không tạo kích thước cho phần tử. Một div rỗng có ảnh nền thì cao 0px. Hãy cho nó nội dung, padding, height hoặc aspect-ratio.
• Ảnh nền chỉ để trang trí. Trình đọc màn hình bỏ qua nó và nó không có văn bản alt. Ảnh mang ý nghĩa nội dung nên nằm trong phần tử <img>.

background-size: cover, contain và độ dài

background-size co giãn ảnh. Hai từ khóa đều giữ nguyên tỷ lệ của ảnh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>cover vs contain</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box {
      --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='320' cy='50' r='24' fill='%23f59e0b'/%3E%3Cpath d='M0 200L120 70L220 200Z' fill='%2316a34a'/%3E%3Cpath d='M140 200L270 90L400 200Z' fill='%2315803d'/%3E%3C/svg%3E");
      width: 160px; height: 160px;
      background: var(--landscape) center / auto no-repeat, #e5e7eb;
      border: 2px solid #111827;
    }
    .cover { background-size: cover; }
    .contain { background-size: contain; }
    .stretch { background-size: 100% 100%; }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box"></div>auto (400x200, cropped)</div>
    <div><div class="box cover"></div>cover</div>
    <div><div class="box contain"></div>contain</div>
    <div><div class="box stretch"></div>100% 100% (distorted)</div>
  </div>
</body>
</html>

Ảnh có chiều rộng gấp đôi chiều cao, còn mỗi hộp là hình vuông.

cover là lựa chọn quen thuộc cho banner lớn và thẻ. contain dành cho logo và hình minh họa không bao giờ được bị cắt.

background-position và background-repeat

background-position đặt vị trí ảnh trong hộp, bằng từ khóa (top, center, bottom, left, right), phần trăm hoặc độ dài. background-repeat điều khiển việc lát lặp. Thử vài giá trị:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Position and repeat</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      height: 140px; margin-top: 10px;
      border: 2px solid #111827;
      background-color: #f3f4f6;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%232563eb'/%3E%3C/svg%3E");
      background-size: 48px;
    }
    label { display: block; margin-top: 6px; }
  </style>
</head>
<body>
  <label>background-position: <input id="pos" value="center" size="18"></label>
  <label>background-repeat: <input id="rep" value="no-repeat" size="18"></label>
  <div id="box"></div>
  <script>
    const box = document.getElementById('box');
    const pos = document.getElementById('pos');
    const rep = document.getElementById('rep');
    const show = () => {
      box.style.backgroundPosition = pos.value;
      box.style.backgroundRepeat = rep.value;
    };
    pos.addEventListener('input', show);
    rep.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Thử các vị trí top right, bottom 10px right 20px và 25% 75%, cùng các giá trị lặp repeat-x, repeat-y, space (lát có khoảng cách để không ô nào bị cắt) và round (đổi kích thước ô để vừa một số nguyên ô).

Xếp lớp: nhiều nền và lớp phủ chữ

background-image nhận một danh sách phân cách bằng dấu phẩy. Lớp đầu tiên được vẽ trên cùng. Cách dùng phổ biến là đặt một gradient bán trong suốt lên trên ảnh chụp để chữ trắng vẫn dễ đọc:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overlay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='320' cy='50' r='24' fill='%23f59e0b'/%3E%3Cpath d='M0 200L120 70L220 200Z' fill='%2316a34a'/%3E%3Cpath d='M140 200L270 90L400 200Z' fill='%2315803d'/%3E%3C/svg%3E");
      background-image:
        linear-gradient(rgb(17 24 39 / 10%), rgb(17 24 39 / 75%)),
        var(--landscape);
      background-size: cover;
      background-position: center;
      aspect-ratio: 16 / 7;
      display: flex; align-items: end;
      padding: 20px; box-sizing: border-box;
      color: white;
    }
    h1 { margin: 0; font-size: 32px; }
  </style>
</head>
<body>
  <div class="hero" id="hero"><h1>Readable over an image</h1></div>
</body>
</html>

aspect-ratio cho hộp rỗng một chiều cao, và background-size: cover áp dụng cho cả hai lớp. Xem thêm công thức gradient ở gradient trong CSS.

Cách viết rút gọn background

background đặt mọi thuộc tính nền trên một dòng. Kích thước phải đứng ngay sau vị trí, ngăn cách bằng dấu gạch chéo, và màu nằm ở lớp cuối cùng:

.hero {
  background: url("hero.jpg") center / cover no-repeat, #1f2937;
}
/* the same as */
.hero {
  background-image: url("hero.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #1f2937;
}

Màu dự phòng hiện ra trong lúc ảnh đang tải và khi ảnh tải lỗi. Thuộc tính nào bạn bỏ ra khỏi cách viết rút gọn sẽ bị đặt lại về mặc định, nên hãy viết dạng rút gọn trước và các thuộc tính riêng lẻ sau.

Các thuộc tính nền khác

Lỗi thường gặp

• Sai đường dẫn. url() trong stylesheet tính tương đối theo tệp CSS, không phải theo trang HTML.
• Phần tử rỗng. Nó không có chiều cao, nên ảnh không có chỗ để hiện.
• Quên no-repeat khi dùng contain hoặc ảnh nhỏ: ảnh sẽ bị lát lặp.
• Kéo giãn bằng 100% 100% trong khi bạn muốn cover.
• Dùng ảnh quan trọng làm nền. Hãy dùng <img> kèm văn bản alt cho nội dung; trình đọc màn hình không thấy ảnh nền.
• Thiếu dấu nháy quanh URL data: có chứa khoảng trắng hoặc dấu nháy. Luôn viết url("...").