Thuộc tính background-size

Thuộc tính background-size đặt kích thước hình ảnh nền. Giá trị của thuộc tính có thể là bất kỳ đơn vị kích thước nào, hoặc các từ khóa auto, cover hoặc contain.

Cú pháp

bộ chọn {
	background-size: giá trị;
}

Từ khóa

Giá trị	Mô tả
`auto`	Nền sẽ có kích thước tự nhiên, giống như kích thước thực của hình ảnh nền. Nếu `auto` chỉ được đặt cho một chiều, thì ở chiều đó nền sẽ được tỷ lệ sao cho giữ nguyên tỷ lệ gốc.
`cover`	Tỷ lệ hình ảnh để nó phủ toàn bộ khối với việc giữ nguyên tỷ lệ. Hình ảnh sẽ cố gắng vừa vặn toàn bộ, nhưng điều này không phải lúc nào cũng đạt được, do đó một phần của nó có thể bị cắt. Khối sẽ luôn được phủ đầy bởi hình ảnh.
`contain`	Tỷ lệ hình ảnh để nó vừa hoàn toàn bên trong khối với việc giữ nguyên tỷ lệ. Khi đó nó có thể chiếm toàn bộ chiều rộng, hoặc toàn bộ chiều cao (phụ thuộc vào tỷ lệ hình ảnh và kích thước phần tử). Nhìn chung khối sẽ không được phủ đầy bởi hình ảnh (nhưng hình ảnh luôn hiển thị đầy đủ, dù có thể ở kích thước nhỏ hơn).

Giá trị mặc định: auto.

Cách sử dụng

Các đơn vị kích thước và auto có thể được sử dụng trong nhiều tổ hợp khác nhau, ví dụ: auto 20px, hoặc 30% 20px, hoặc auto 30%, v.v. Trong trường hợp này tham số đầu tiên đặt kích thước nền theo chiều rộng, và tham số thứ hai - kích thước nền theo chiều cao. Nếu chỉ định một tham số - nó sẽ đặt kích thước nền cho cả chiều rộng, và chiều cao cùng lúc.

Ví dụ

Bây giờ hình nền sẽ có kích thước tự nhiên của nó:

<div id="elem"></div>

#elem {
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 550px;
	height: 400px;
}

Ví dụ

Bây giờ hình nền sẽ có kích thước 300px trên 400px (trong trường hợp của chúng ta tỷ lệ hình ảnh sẽ bị biến dạng):

<div id="elem"></div>

#elem {
	background-size: 300px 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

Ví dụ

Bây giờ hình nền sẽ có kích thước 400px trên 400px (trong trường hợp của chúng ta tỷ lệ hình ảnh sẽ bị biến dạng):

<div id="elem"></div>

#elem {
	background-size: 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

Ví dụ

Bây giờ hình nền sẽ có kích thước 400px theo chiều ngang, còn theo chiều dọc kích thước của nó sẽ tự điều chỉnh để tỷ lệ không bị biến dạng:

<div id="elem"></div>

#elem {
	background-size: 400px auto;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

Ví dụ

Bây giờ hình nền sẽ có kích thước 400px theo chiều dọc, còn theo chiều ngang kích thước của nó sẽ tự điều chỉnh để tỷ lệ không bị biến dạng:

<div id="elem"></div>

#elem {
	background-size: auto 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

Ví dụ . Giá trị contain

Hãy xem cách hoạt động của giá trị contain:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Ví dụ . Giá trị cover

Hãy xem cách hoạt động của giá trị cover:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Ví dụ . Cải thiện hoạt động của cover

Hoạt động của giá trị cover có thể được cải thiện bằng cách căn giữa hình ảnh với thuộc tính background-position (trong trường hợp của chúng ta, các phần nhìn thấy sẽ bắt đầu là đầu của những con ngựa, thay vì phần đuôi của chúng):

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Xem thêm

thuộc tính background,
là thuộc tính viết tắt cho nền