Thiết lập kích thước hình nền với CSS background-size

Thuộc tính background-size trong CSS

Thuộc tính background-size cho phép kiểm soát **kích thước** của hình ảnh nền. Mặc định hình nền giữ kích thước gốc, nhưng bạn có thể co giãn, bao phủ, hoặc chứa vừa khung.

Các giá trị phổ biến

Giá trị	Mô tả
`auto` (mặc định)	Giữ kích thước gốc của ảnh
`cover`	Phóng to ảnh vừa đủ bao phủ toàn bộ vùng nền (có thể bị cắt)
`contain`	Phóng to/thu nhỏ ảnh vừa đủ chứa trong vùng nền (toàn bộ ảnh hiển thị, có thể thừa khoảng trống)
`<length> <length>`	Chiều rộng và chiều cao cụ thể (px, %, em...). 1 giá trị = width, height = auto

Ví dụ thực hành

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo {
      border: 5px dashed green;
      padding: 10px;
      background-image: url("logo.jpg");
      background-repeat: no-repeat;
      background-position: center;
      width: 400px; height: 200px;
      margin-bottom: 20px;
    }
    .size-auto { background-size: auto; }
    .size-cover { background-size: cover; }
    .size-contain { background-size: contain; }
    .size-custom { background-size: 200px 100px; }
  </style>
</head>
<body>
  <div class="demo size-auto">auto (mặc định)</div>
  <div class="demo size-cover">cover - bao phủ toàn bộ</div>
  <div class="demo size-contain">contain - chứa vừa khung</div>
  <div class="demo size-custom">200px x 100px - kích thước cố định</div>
</body>
</html>

Lưu ý

cover hay dùng cho hero section, banner full màn hình
contain phù hợp logo, icon cần hiển thị toàn bộ
Kết hợp với background-position để căn chỉnh khi dùng cover/contain