- Trang chủ
- Hướng dẫn học
- Hướng dẫn học CSS3
- background-size
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ị;
}
0 có thể là:Background size
đơn vị[1 thành phần] [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] [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] [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] [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ị
1 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.Background size
Xem ví dụ dưới đây để hiểu rõ hơn về background-size
:
Chuẩn bị
HTML viết:
Background size
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 khi chưa có background-size:
background-size 1 thành phần
Hiển thị trình duyệt:
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 khi chưa có background-size:
background-size 1 thành phần
Hiển thị trình duyệt:
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 khi chưa có background-size:
background-size 1 thành phần
Hiển thị trình duyệt: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 khi chưa có background-size:
background-size 1 thành phần
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.
apx bpx
- Hình nền sẽ có chiều rộng là a pixel và chiều cao là b pixel.background-size dùng để thiết lập "kích thước của hình nền".
- Nếu một trong hai giá trị là auto thì giá trị đó sẽ tự động được xác định dựa theo giá trị còn lại sao cho đúng tỷ lệ với tấm hình gốc.
Ví dụ: Tôi có một tấm hình với kích thước 200x100:
Nếu giá trị thuộc tính background-size là 400px auto thì nó sẽ tương đương với 400px 200px
Nếu giá trị thuộc tính background-size là auto 70px thì nó sẽ tương đương với 140px 70pxbackground-size, tôi có thể thiết lập kích thước của hình nền lớn hơn kích thước của tấm hình gốc.
- Lưu ý: Nếu ta chỉ đưa ra một giá trị thì giá trị đó là chiều rộng của hình nền, giá trị còn lại sẽ mặc định là auto.
. . . .
2] Cách sử dụng thuộc tính background-size trong CSS
- Để sử dụng thuộc tính background-size, ta dùng cú pháp như sau:background-size, ta dùng cú pháp như sau:
background-size: giá trị;
- Dưới đây là cách xác định & danh sách các "giá trị" được dùng cho thuộc tính background-size:background-size:
auto | - Hình nền sẽ có kích thước bằng với kích thước của tấm hình gốc. | Xem ví dụ |
apx bpx px bpx | - Hình nền sẽ có chiều rộng là a pixel và chiều cao là b pixel.a pixel và chiều cao là b pixel. - Nếu một trong hai giá trị là auto thì giá trị đó sẽ tự động được xác định dựa theo giá trị còn lại sao cho đúng tỷ lệ với tấm hình gốc.
- Lưu ý: Nếu ta chỉ đưa ra một giá trị thì giá trị đó là chiều rộng của hình nền, giá trị còn lại sẽ mặc định là auto. | Xem ví dụ |
apx bpx % b% | - Hình nền sẽ có chiều rộng là a pixel và chiều cao là b pixel.
Nếu giá trị thuộc tính background-size là 400px auto thì nó sẽ tương đương với 400px 200px - Nếu một trong hai giá trị là auto thì giá trị đó sẽ tự động được xác định dựa theo giá trị còn lại sao cho đúng tỷ lệ với tấm hình gốc. - Lưu ý: Nếu ta chỉ đưa ra một giá trị thì giá trị đó là chiều rộng của hình nền, giá trị còn lại sẽ mặc định là auto. | Xem ví dụ |
apx bpx | - Hình nền sẽ có chiều rộng là a pixel và chiều cao là b pixel.
[hình nền sẽ hiển thị thiếu phần bên phải hoặc phía dưới] | Xem ví dụ |
contain | - Đối với giá trị này, hình nền sẽ có các đặc điểm như sau:
| Xem ví dụ |
contain | - Đối với giá trị này, hình nền sẽ có các đặc điểm như sau: Tỷ lệ chiều rộng/chiều cao của hình nền sẽ bằng với tỷ lệ chiều rộng/chiều cao của tấm hình gốc. | Xem ví dụ |
contain | - Đối với giá trị này, hình nền sẽ có các đặc điểm như sau: | Xem ví dụ |