CSS background-size property là gì ?

Posted by Lập Trình Viên CSS 10 phút đọc

CSS Background-Size Property là thuộc tính CSS được sử dụng để thiết lập kích thước của hình nền (background image) trong một phần tử. Hình nền có thể được kéo dài hoặc giữ nguyên để vừa khít với không gian hiện tại. Thuộc tính này cho phép chúng ta kiểm soát quy mô của hình nền. Thuộc tính này có thể được xác định bằng đơn vị chiều dài, phần trăm hoặc từ khóa. Nó có hai giá trị từ khóa có thể sử dụng là contain và cover.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS Background-Size Property Là Gì?

CSS Background-Size Property được sử dụng để điều chỉnh kích thước của hình nền của một phần tử. Thuộc tính này có thể giúp kiểm soát tấm hình nền, kéo dài hoặc thu nhỏ kích thước của nó để phù hợp với không gian hiện có. Thuộc tính này có thể được xác định bằng đơn vị chiều dài, phần trăm hoặc từ khóa. Khi sử dụng chức năng này, ta có thể kiểm soát quy mô của hình nền theo ý muốn.

CSS Background-Size Property có thể được sử dụng bởi các nhà phát triển web hoặc bất kỳ ai muốn điều chỉnh hình nền của một trang web để phù hợp với không gian hiện có. Nó là một tính năng quan trọng trong thiết kế web và được sử dụng rộng rãi bởi những người muốn kiểm soát kích thước của hình nền.

Hướng Dẫn CSS Background-Size Property

Để sử dụng CSS Background-Size Property, ta có thể sử dụng cú pháp sau:

background-size: value;

Trong đó, giá trị value có thể là:

  • auto: Giá trị mặc định, hiển thị hình nền ở kích thước ban đầu.
  • length: Sử dụng để thiết lập chiều rộng và chiều cao của hình nền. Giá trị này kéo dài hình ảnh theo chiều tương ứng của độ dài được cho. Nếu chỉ có một giá trị, thì chiều rộng của hình ảnh sẽ được thiết lập, và chiều cao sẽ tự động được thiết lập. Nếu có hai giá trị, giá trị đầu tiên thiết lập chiều rộng, và giá trị thứ hai thiết lập chiều cao. Giá trị âm không được phép.
  • percentage: Giá trị này xác định chiều rộng và chiều cao của hình nền dưới dạng phần trăm (%) so với khu vực định vị nền. Giá trị âm không được phép.
  • cover: Giá trị này được sử dụng để thay đổi kích thước hình ảnh nền cho phù hợp với toàn bộ khối chứa. Đôi khi, nó cắt một ít ở một trong các cạnh hoặc kéo dài hình ảnh. Nó thay đổi kích thước hình ảnh để đảm bảo rằng phần tử hoàn toàn được phủ.
  • contain: Thay đổikích thước hình ảnh nền để đảm bảo rằng hình ảnh được hiển thị toàn diện mà không bị cắt hoặc bị kéo dài.
  • initial: Thiết lập thuộc tính về giá trị mặc định.
  • inherit: Kế thừa thuộc tính từ phần tử cha.

Nếu phần tử có nhiều hình nền, chúng ta có thể xác định kích cỡ khác nhau của từng hình nền bằng cách sử dụng các giá trị được phân tách bằng dấu phẩy.

Ví dụ cụ thể:

Ví dụ bên dưới, kích thước Background của phần tử div đầu tiên được đặt thành tự động, phần tử div thứ hai được đặt thành 150px x 150px và kích thước Background của phần tử div thứ ba được đặt thành 30%.

<!DOCTYPE html>
<html>
<head>
<title>
background-size property
</title>
<style>
div {
width: 300px;
height: 200px;
border: 2px solid red;
}
#div1{
background-image: url('lion.png');
background-size: auto;
}
#div2{
background-image: url('lion.png');
background-size: 150px 150px;
}
#div3{
background-image: url('lion.png');
background-size: 30%;
}
</style>
</head>

<body>
<h2> background-size: auto; </h2>
<div id = "div1"></div>
<h2> background-size: 150px 150px; </h2>
<div id = "div2"></div>
<h2> background-size: 30%; </h2>
<div id = "div3"></div>
</body>
</html>

Thêm một ví dụ nữa về thuộc tính này.

<!DOCTYPE html>
<html>
<head>
<title>
background-size property
</title>
<style>
div {
width: 300px;
height: 250px;
border: 2px solid red;
background-repeat: no-repeat;
}
#div1{
background-image: url('lion.png');
background-size: contain;
}
#div2{
background-image: url('lion.png');
background-size: cover;
}
#div3{
background-image: url('lion.png');
background-size: initial;
}
</style>
</head>

<body>
<h2> background-size: contain; </h2>
<div id = "div1"></div>
<h2> background-size: cover; </h2>
<div id = "div2"></div>
<h2> background-size: initial; </h2>
<div id = "div3"></div>
</body>
</html>

Tiếp theo, bạn thấy bên dưới chúng tôi sẽ sử dụng 2 background xếp chồng nên nhau.

<!DOCTYPE html>
<html>
<head>
<title>
background-size property
</title>
<style>
div {
width: 250px;
height: 250px;
border: 2px solid red;
background-repeat: no-repeat;
background-position: center;
}
#div1{
background-image: url('lion.png'), url('forest.jpg');
background-size: 300px 150px, cover;
}
#div2{
background-image: url('lion.png'), url('forest.jpg');
background-size: 200px 150px, 300px 200px;
}
#div3{
background-image: url('lion.png'), url('forest.jpg');
background-size: 150px 175px, contain;
}
</style>
</head>

<body>
<h2> background-size: 300px 150px, cover; </h2>
<div id = "div1"></div>
<h2> background-size: 200px 150px, 300px 200px; </h2>
<div id = "div2"></div>
<h2> background-size: 150px 175px, contain; </h2>
<div id = "div3"></div>

</body>
</html>

Ưu và Nhược Điểm CSS Background-Size Property

Ưu điểm của CSS Background-Size Property là cho phép kiểm soát kích thước hình nền của một phần tử trong thiết kế web. Nó cũng cho phép sử dụng các giá trị đơn vị chiều dài, phần trăm hoặc từ khóa để kiểm soát quy mô của hình nền.

Tuy nhiên, một số nhược điểm của CSS Background-Size Property là việc sử dụng giá trị không hợp lý có thể làm mất chất lượng và độ phân giải của hình ảnh nền. Ngoài ra, nó cũng có thể gây ra tình trạng cắt góc hoặc kéo dài hình ảnh để vừa khít với không gian hiện có, làm mất đi tính thẩm mỹ của thiết kế.

Khi sử dụng CSS Background-Size Property, chúng ta nên lựa chọn giá trị phù hợp để đảm bảo cho hình nền hiển thị đúng kích thước và độ phân giải. Chúng ta cũng nên kiểm tra kết quả hiển thị trên các trình duyệt khác nhau để đảm bảo tính tương thích và thẩm mỹ của thiết kế web.

Tổng Kết

Từ bài viết trên, chúng ta đã tìm hiểu về CSS Background-Size Property và cách sử dụng nó trong thiết kế web. Thuộc tính này cho phép kiểm soát kích thước hình nền của một phần tử, dựa trên đơn vị chiều dài, phần trăm hoặc từ khóa. Tuy nhiên, chúng ta cũng cần lưu ý để chọn giá trị phù hợp để đảm bảo tính tương thích và thẩm mỹ của thiết kế web. 

Thuộc tính CSS Background-Size Property dùng để làm gì?

Nó được sử dụng để thiết lập kích thước của hình nền của một phần tử trong thiết kế web.

Có bao nhiêu giá trị có thể sử dụng trong thuộc tính này?

Có nhiều giá trị có thể sử dụng trong thuộc tính này, bao gồm đơn vị chiều dài, phần trăm hoặc từ khóa.

Giá trị cover và contain trong CSS Background-Size Property có ý nghĩa gì?

Giá trị cover được sử dụng để thay đổi kích thước hình ảnh nền cho phù hợp với toàn bộ khối chứa, trong khi giá trị contain thay đổi kích thước hình ảnh nền để đảm bảo rằng hình ảnh được hiển thị toàn diện mà không bị cắt hoặc bị kéo dài.

Thuộc tính CSS Background-Size Property có nhược điểm gì?

Một số nhược điểm của thuộc tính này là việc sử dụng giá trị không hợp lý có thể làm mất chất lượng và độ phân giải của hình ảnh nền, cũng như tình trạng cắt góc hoặc kéo dài hình ảnh để vừa new article.