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.
|
| 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.
|
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 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:
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:
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:
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:
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.