CSS: Thuộc tính background-size

Thuộc tính background-size

Chỉ định kích thước của các hình ảnh nền

Cấu trúc

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

Với các giá trị như sau

Thuộc tính	Giá trị	Ví dụ	Mô tả
background-size	[đơn vị]	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ị][đơn vị]	background-size: 100px 50px;	Xác định chiều rộng và chiều cao cho vùng background theo đơn vị.
	[%]	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ệ.
	[%][%]	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).

Ví dụ về thuộc tính background-size

CSS Property:

background-size:

auto

100px 100px

75px 75px

10px 150px

200px

50%

100% 100%

cover

contain

initial

Result:

CSS Code:

div
{
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNJuiA4UIGNmIkHWF3VybSr24vbnRymo4RPAwPVnoNasNcNpVQpY4dEYHW4RaDdqVHWf5R0H7ebfGeEzDjkZGmgStHAVvm-KoNtU_6nTmrADUq_Wg-E_sULZB-jpZzFg4rT2st20j-sqAo/s1600/vdclip.png');
background-repeat:no-repeat;
background-size:auto;
}