background-size là gì?

Bài học này sẽ giúp các bạn thay đổi kích thước chiều rộng hoặc chiều cao của background bằng cách sử dụng thuộc tính background-size.

Cấu trúc

tag {
    background-size: giá trị;
}

Giá trị có thể là:

giá trị Ví dụ Mô tả
đơn vị
(1 thành phần)
background-size: 100px; Xác định chiều rộng theo đơn vị, chiều cao sẽ tự động chỉnh theo tỷ lệ.
đơn vị
(2 thành phần)
background-size: 100px 50px; Xác định chiều rộng và chiều cao cho vùng background theo đơn vị.
%
(1 thành phần)
background-size: 50%; Xác định chiều rộng theo % của nội dung bao ngoài, chiều cao sẽ tự động chỉnh theo tỷ lệ.
%
(2 thành phần)
background-size: 100% 50%; Xác định chiều rộng và chiều cao cho vùng background theo % của nội dung bao ngoài.
cover background-size: cover;

Tự chia tỷ lệ tới kích thước lớn nhất của chiều rộng hoặc chiều cao để phù hợp với vùng nội dung.

  • Nếu chiều cao lớn hơn chiều rộng thì background sẽ chỉnh 100% theo chiều cao, chiều rộng sẽ tự động chỉnh tỷ lệ cho phù hợp (auto).
  • Ngược lại nếu chiều rộng lớn hơn chiều cao thì background sẽ chỉnh 100% theo chiều rộng, chiều cao sẽ tự động chỉnh tỷ lệ cho phù hợp (auto)
contain background-size: contain;

Tự chia tỷ lệ tới kích thước nhỏ nhất của chiều rộng hoặc chiều cao để phù hợp với vùng nội dung.

  • Nếu chiều cao nhỏ hơn chiều rộng thì background sẽ chỉnh 100% theo chiều cao, chiều rộng sẽ tự động chỉnh tỷ lệ cho phù hợp (auto).
  • Ngược lại nếu chiều rộng nhỏ hơn chiều cao thì background sẽ chỉnh 100% theo chiều rộng, chiều cao sẽ tự động chỉnh tỷ lệ cho phù hợp (auto).

Trong các giá trị trên, thì giá trị cover là thường được dùng nhất, dùng nhiều khi muốn background full theo kích thước của thành phần bao ngoài, VD dùng trong những trang có background full màn hình window.

Xem ví dụ dưới đây để hiểu rõ hơn về background-size:

Chuẩn bị

HTML viết:

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div>Background size</div>
</body>
</html>

CSS viết:

div {
    background: url(images/img_sakura.jpg) no-repeat;
    border: 1px solid #000099;
    height: 300px;
    width: 500px;
}

Hiển thị trình duyệt khi chưa có background-size:

Background size

background-size 1 thành phần

CSS viết:

div {
    background: url(images/img_sakura.jpg) no-repeat;
    background-size: 300px;
    border: 1px solid #000099;
    height: 300px;
    width: 500px;
}

Hiển thị trình duyệt:

Background size

Ta thấy chiều rộng của background bây giờ là 300px, chiều cao được điều chỉnh theo tương ứng với tỷ lệ ban đầu.

background-size 2 thành phần

CSS viết:

div {
    background: url(images/img_sakura.jpg) no-repeat;
    background-size: 300px 150px;
    border: 1px solid #000099;
    height: 300px;
    width: 500px;
}

Hiển thị trình duyệt:

Background size

Ta thấy chiều rộng của background bây giờ là 300px, chiều cao là 150px.

background-size theo phần trăm

CSS viết:

div {
    background: url(images/img_sakura.jpg) no-repeat;
    background-size: 50%;
    border: 1px solid #000099;
    height: 300px;
    width: 500px;
}

Hiển thị trình duyệt:

Background size

Ta thấy chiều rộng của background bây giờ là 50% của thành phần div, chiều cao điều chỉnh theo tỷ lệ tương ứng.

background-size với giá trị cover

CSS viết:

div {
    background: url(images/img_sakura.jpg) no-repeat;
    background-size: cover;
    border: 1px solid #000099;
    height: 300px;
    width: 500px;
}

Hiển thị trình duyệt:

Background size

Ta thấy chiều rộng của background bây giờ đã tự điều chỉnh full thành phần div, và chiều cao tự điều chỉnh theo tỷ lệ tương ứng.

Nếu chiều cao nhiều hơn chiều rộng thì background sẽ chỉnh theo chiều cao trước, sau đó sẽ tự điều chỉnh chiều rộng cho phù hợp.

Do đó background-size: cover; thường được dùng trong trường hợp chiều rộng của thành phần chứa background có thể thay đổi tùy ý được.