background-size

Try it

background-size: contain;

background-size: contain;
background-repeat: no-repeat;

background-size: cover;

background-size: 30%;

background-size: 200px 100px;

<section id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  background-image: url("/shared-assets/images/examples/hand.jpg");
  min-width: 100%;
  min-height: 100%;
}

Cú pháp

/* Giá trị từ khóa */
background-size: cover;
background-size: contain;

/* Cú pháp một giá trị */
/* chiều rộng hình (chiều cao trở thành 'auto') */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/* Cú pháp hai giá trị */
/* giá trị đầu tiên: chiều rộng, giá trị thứ hai: chiều cao */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* Nhiều nền */
background-size: auto, auto; /* Không nhầm với `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/* Giá trị toàn cục */
background-size: inherit;
background-size: initial;
background-size: revert;
background-size: revert-layer;
background-size: unset;

Thuộc tính background-size được chỉ định theo một trong các cách sau:

• Sử dụng giá trị từ khóa contain hoặc cover.
• Chỉ sử dụng giá trị chiều rộng, khi đó chiều cao mặc định là auto.
• Sử dụng cả giá trị chiều rộng và chiều cao, giá trị đầu tiên đặt chiều rộng, giá trị thứ hai đặt chiều cao. Mỗi giá trị có thể là <length>, <percentage>, hoặc auto.

Để chỉ định kích thước của nhiều hình nền, hãy phân tách các giá trị bằng dấu phẩy.

Giá trị

contain

Thu phóng hình ảnh lớn nhất có thể trong vùng chứa mà không cắt hoặc kéo giãn hình. Nếu vùng chứa lớn hơn hình, hình sẽ được lặp lại dạng lưới, trừ khi thuộc tính background-repeat được đặt thành no-repeat.

cover

Thu phóng hình ảnh (trong khi giữ nguyên tỷ lệ) đến kích thước nhỏ nhất có thể để lấp đầy vùng chứa (cả chiều cao và chiều rộng đều phủ hoàn toàn vùng chứa), không để lại khoảng trống. Nếu tỷ lệ nền khác với phần tử, hình ảnh sẽ bị cắt theo chiều dọc hoặc chiều ngang.

auto

Thu phóng hình nền theo chiều tương ứng sao cho tỷ lệ tự nhiên được duy trì.

<length>

Kéo giãn hình ảnh theo chiều tương ứng đến độ dài được chỉ định. Không cho phép giá trị âm.

<percentage>

Kéo giãn hình ảnh theo chiều tương ứng đến phần trăm được chỉ định của vùng định vị nền. Vùng định vị nền được xác định bởi giá trị background-origin (mặc định là padding box). Tuy nhiên, nếu giá trị background-attachment của nền là fixed, vùng định vị thay vào đó là toàn bộ khung nhìn. Không cho phép giá trị âm.

Kích thước và tỷ lệ tự nhiên

Việc tính toán giá trị phụ thuộc vào kích thước tự nhiên (chiều rộng và chiều cao) và tỷ lệ tự nhiên (tỷ lệ chiều rộng/chiều cao) của hình ảnh. Các thuộc tính này như sau:

• Hình ảnh bitmap (như JPG) luôn có kích thước và tỷ lệ tự nhiên.
• Hình ảnh vector (như SVG) không nhất thiết có kích thước tự nhiên. Nếu có cả kích thước ngang và dọc tự nhiên, nó cũng có tỷ lệ tự nhiên. Nếu không có kích thước hoặc chỉ có một kích thước, nó có thể có hoặc không có tỷ lệ.
• CSS <gradient> không có kích thước hay tỷ lệ tự nhiên.
• Hình nền được tạo bằng hàm element() sử dụng kích thước và tỷ lệ tự nhiên của phần tử tạo ra.

Dựa vào kích thước và tỷ lệ tự nhiên, kích thước hiển thị của hình nền được tính như sau:

• Nếu cả hai thành phần của background-size được chỉ định và đều không phải auto: Hình nền được hiển thị theo kích thước đã chỉ định.

• Nếu background-size là contain hoặc cover: Trong khi giữ nguyên tỷ lệ tự nhiên, hình ảnh được hiển thị theo kích thước lớn nhất nằm trong, hoặc bao phủ, vùng định vị nền. Nếu hình không có tỷ lệ tự nhiên, nó được hiển thị theo kích thước của vùng định vị nền.

• Nếu background-size là auto hoặc auto auto:

  • Nếu hình có cả kích thước ngang và dọc tự nhiên, nó được hiển thị theo kích thước đó.
  • Nếu hình không có kích thước tự nhiên và không có tỷ lệ tự nhiên, nó được hiển thị theo kích thước vùng định vị nền.
  • Nếu hình không có kích thước tự nhiên nhưng có tỷ lệ tự nhiên, nó được hiển thị như thể contain đã được chỉ định.
  • Nếu hình chỉ có một kích thước tự nhiên và có tỷ lệ tự nhiên, nó được hiển thị theo kích thước tương ứng với chiều đó. Chiều còn lại được tính từ chiều đã chỉ định và tỷ lệ tự nhiên.
  • Nếu hình chỉ có một kích thước tự nhiên nhưng không có tỷ lệ tự nhiên, nó được hiển thị bằng chiều đã chỉ định và chiều còn lại sử dụng kích thước của vùng định vị nền.

  Note: Hình ảnh SVG có thuộc tính preserveAspectRatio mặc định tương đương với contain; một background-size tường minh khiến preserveAspectRatio bị bỏ qua.

• Nếu background-size có một thành phần auto và một thành phần không phải auto:

  • Nếu hình có tỷ lệ tự nhiên, nó được kéo giãn theo chiều đã chỉ định. Chiều chưa chỉ định được tính từ chiều đã chỉ định và tỷ lệ tự nhiên.
  • Nếu hình không có tỷ lệ tự nhiên, nó được kéo giãn theo chiều đã chỉ định. Chiều chưa chỉ định được tính từ kích thước tự nhiên tương ứng của hình nếu có. Nếu không có kích thước tự nhiên như vậy, nó trở thành chiều tương ứng của vùng định vị nền.

Định nghĩa chính thức

Cú pháp chính thức

background-size = 
  <bg-size>#  

<bg-size> = 
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain                                    

<length-percentage> = 
  <length>      |
  <percentage>  

Ví dụ

Lặp lại hình lớn

Hãy xem xét một hình lớn, logo Firefox dạng 2982x2808 pixel. Chúng ta muốn chia bốn bản sao của hình này vào một phần tử 300x300 pixel. Để làm điều này, chúng ta có thể sử dụng giá trị background-size cố định là 150 pixel.

HTML

<div class="tiledBackground"></div>

CSS

.tiledBackground {
  background-image: url("https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png");
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

Kết quả

Xem Thay đổi kích thước hình nền để biết thêm ví dụ.

Đặc tả

Tương thích trình duyệt

Xem thêm

• Thay đổi kích thước hình nền
• Thu phóng nền SVG
• object-fit