HTML/CSS | Background-size

Học HTML, CSS từ Zero Tới Hero

• Ứng dụng của background-size
• Các giá trị
• Cover
• Contain
• Sử dụng một giá trị
• Sử dụng hai giá trị

Ứng dụng của background-size

Thuộc tính background-size được sử dụng để thay đổi kích thước ảnh nền phần tử. Nó cho phép bạn kiểm soát kích thước hiển thị của ảnh nền theo nhiều cách khác nhau.

Cú pháp:

background-size: value;

Các giá trị

Cover

Giá trị cover làm cho ảnh nền phủ kín toàn bộ phần tử nhưng vẫn giữ nguyên tỷ lệ khung hình.

Nếu tỉ lệ hình ảnh nhỏ hơn khung hình, hình ảnh sẽ bị phóng lơn lên. Ngược lại, nếu hình ảnh lớn hơn tỉ lệ khung hình, ảnh sẽ bị thu nhỏ lại để làm sao lấp đầy khung hình và không để lại một khoảng trằng nào trong kích thước phần tử. Vì vậy, một phần hình ảnh có thể bị mất đi.

Ví dụ:

<style>
.bg-1 {
  width: 400px;
  height: 300px;
  border: 3px dotted #ccc;
  background-image: url(https://files.fullstack.edu.vn/f8-prod/manual_uploads/htmlcss-pro/bg-size-2.jpg);
  background-size: cover;
}

</style>
<div class="bg-1"></div>

Contain

Với contain, ảnh nền sẽ nằm vừa vặn trong khung hình đồng thời không để mất đi bầy kỳ một phần nào của hình ảnh cả. Nếu tỷ lệ hình ảnh khác với tỷ lệ khung hình, có thể để lại một khoảng trống bên trong khung hình.

Ví dụ:

<style>
.bg-2 {
  width: 400px;
  height: 300px;
  border: 3px dotted #ccc;
  background-image: url(https://files.fullstack.edu.vn/f8-prod/manual_uploads/htmlcss-pro/bg-size-1.jpg);
  background-repeat: no-repeat;
  background-size: contain;
}

</style>
<div class="bg-2"></div>

Sử dụng một giá trị

Khi sử dụng một giá trị cho background-size, giá trị này sẽ tương ứng với chiều rộng của phần tử, chiều cao sẽ tự động theo tỷ lệ.

Ví dụ:

<style>
.bg-1 {
  height: 300px;
  border: 3px dotted #ccc;
  background-image: url(https://files.fullstack.edu.vn/f8-prod/manual_uploads/htmlcss-pro/bg-size-2.jpg);
  background-repeat: no-repeat;
  background-size: 200px;
}

</style>
<div class="bg-1"></div>

Sử dụng hai giá trị

Sử dụng background-size với hai giá trị, trình duyệt sẽ hiểu lần lượt là chiều rộng và chiều cao của phần tử.

Ví dụ:

<style>
.bg-1 {
  height: 300px;
  border: 3px dotted #ccc;
  background-image: url(https://files.fullstack.edu.vn/f8-prod/manual_uploads/htmlcss-pro/bg-size-2.jpg);
  background-repeat: no-repeat;
  background-size: 100px 200px;
}

</style>
<div class="bg-1"></div>

Nếu tỷ lệ của hai giá trị không đúng với tỷ lệ hình ảnh, hình ảnh sẽ bị méo. Vì vậy, khi sử dụng background-size với hai giá trị, bạn cần tính toán đúng tỷ lệ để hình ảnh không bị méo.

Tóm tắt

• Thuộc tính background-size được sử dụng để thay đổi kích thước ảnh nền phần tử, giúp kiểm soát kích thước hiển thị của ảnh nền theo nhiều cách khác nhau.

• Các giá trị của background-size:

  • cover: Làm cho ảnh nền phủ kín toàn bộ phần tử nhưng vẫn giữ nguyên tỷ lệ khung hình. Hình ảnh có thể bị mất một phần để đảm bảo không có khoảng trống.
  • contain: Ảnh nền nằm vừa vặn trong khung hình mà không mất bất kỳ phần nào của hình ảnh. Có thể để lại khoảng trống nếu tỷ lệ ảnh khác với tỷ lệ khung hình.
  • Sử dụng một giá trị: Giá trị này tương ứng với chiều rộng của phần tử, chiều cao sẽ tự động theo tỷ lệ.
  • Sử dụng hai giá trị: Giá trị đầu là chiều rộng và giá trị thứ hai là chiều cao của phần tử. Hình ảnh có thể bị méo nếu tỷ lệ không đúng.