Thí dụ
Chỉ định kích thước của hình ảnh nền với "tự động" và trong pixel:
#example1 {& nbsp; Bối cảnh: URL [Núi.jpg]; & nbsp; Bối cảnh lặp lại: không lặp lại; & nbsp; Kích thước nền: Tự động; }
background: url[mountain.jpg];
background-repeat: no-repeat;
background-size: auto;
}
#example2 {& nbsp; Bối cảnh: URL [Núi.jpg]; & nbsp; Bối cảnh lặp lại: không lặp lại; & nbsp; Kích thước nền: 300px 100px;}
background: url[mountain.jpg];
background-repeat: no-repeat;
background-size: 300px 100px;
}
Hãy tự mình thử »
Thêm ví dụ "hãy thử nó" dưới đây.
Định nghĩa và cách sử dụng
Thuộc tính background-size
chỉ định kích thước của hình ảnh nền.
Có bốn cú pháp khác nhau mà bạn có thể sử dụng với thuộc tính này: cú pháp từ khóa ["tự động", "bìa" và "chứa"], cú pháp một giá trị [đặt chiều rộng của hình ảnh [chiều cao trở thành "tự động"], Cú pháp hai giá trị [giá trị thứ nhất: chiều rộng của hình ảnh, giá trị thứ hai: chiều cao] và cú pháp nhiều nền [được phân tách bằng dấu phẩy].
Đưa ra bản chạy thử ❯
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Các số theo sau là -webkit-, -moz- hoặc -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
kích thước nền & nbsp; | 4.01.0 & nbsp; -webkit- 1.0 -webkit- | 9.0 | 4.03.6 & nbsp; -moz- 3.6 -moz- | 4.13.0 & nbsp; -webkit- 3.0 -webkit- | 10.510.0 & nbsp; -o- 10.0 -o- |
CSS Cú pháp
Kích thước nền: Tự động | Độ dài | Bìa | chứa | ban đầu | kế thừa;
Giá trị tài sản
Tự động | Giá trị mặc định. Hình ảnh nền được hiển thị trong kích thước ban đầu của nó | Thử nghiệm ❯ |
chiều dài | Đặt chiều rộng và chiều cao của hình nền. Giá trị thứ nhất đặt chiều rộng, giá trị thứ hai đặt chiều cao. Nếu chỉ có một giá trị được đưa ra, thứ hai được đặt thành "tự động". Đọc về các đơn vị chiều dài | Thử nghiệm ❯ |
chiều dài | Đặt chiều rộng và chiều cao của hình nền. Giá trị thứ nhất đặt chiều rộng, giá trị thứ hai đặt chiều cao. Nếu chỉ có một giá trị được đưa ra, thứ hai được đặt thành "tự động". Đọc về các đơn vị chiều dài | Thử nghiệm ❯ |
chiều dài | Đặt chiều rộng và chiều cao của hình nền. Giá trị thứ nhất đặt chiều rộng, giá trị thứ hai đặt chiều cao. Nếu chỉ có một giá trị được đưa ra, thứ hai được đặt thành "tự động". Đọc về các đơn vị chiều dài | Thử nghiệm ❯ |
chiều dài | Đặt chiều rộng và chiều cao của hình nền. Giá trị thứ nhất đặt chiều rộng, giá trị thứ hai đặt chiều cao. Nếu chỉ có một giá trị được đưa ra, thứ hai được đặt thành "tự động". Đọc về các đơn vị chiều dài | Thử nghiệm ❯ |
chiều dài | Đặt chiều rộng và chiều cao của hình nền. Giá trị thứ nhất đặt chiều rộng, giá trị thứ hai đặt chiều cao. Nếu chỉ có một giá trị được đưa ra, thứ hai được đặt thành "tự động". Đọc về các đơn vị chiều dài | |
Tỷ lệ phần trăm | Đặt chiều rộng và chiều cao của hình nền theo phần trăm của phần tử cha. Giá trị thứ nhất đặt chiều rộng, giá trị thứ hai đặt chiều cao. Nếu chỉ có một giá trị được đưa ra, thứ hai được đặt thành "tự động" |
trải ra
Thí dụ
Thay đổi kích thước hình nền để che toàn bộ thùng chứa, ngay cả khi nó phải kéo dài hình ảnh hoặc cắt một chút ra khỏi một trong các cạnh
Lưu trữ
background: url[mountain.jpg];
background-repeat: no-repeat;
background-size: 100% 100%;
}
Thay đổi kích thước hình nền để đảm bảo hình ảnh được hiển thị đầy đủ
background: url[mountain.jpg];
background-repeat: no-repeat;
background-size: 75% 50%;
}
Hãy tự mình thử »
Thí dụ
Thêm ví dụ "hãy thử nó" dưới đây.
Định nghĩa và cách sử dụng
background: url[mountain.jpg];
background-repeat: no-repeat;
background-size: cover;
}
Hãy tự mình thử »
Thí dụ
Thêm ví dụ "hãy thử nó" dưới đây.
Định nghĩa và cách sử dụng
background: url[mountain.jpg];
background-repeat: no-repeat;
background-size: contain;
}
Hãy tự mình thử »
Thí dụ
Thêm ví dụ "hãy thử nó" dưới đây.
Định nghĩa và cách sử dụng
background: url[img_tree.gif], url[mountain.jpg];
background-repeat: no-repeat;
background-size: contain, cover;
}
Hãy tự mình thử »
Thí dụ
Thêm ví dụ "hãy thử nó" dưới đây.
Định nghĩa và cách sử dụng
background-image:
url["photographer.jpg"]; /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Hãy tự mình thử »
Thêm ví dụ "hãy thử nó" dưới đây.
Định nghĩa và cách sử dụng
Thuộc tính background-size
chỉ định kích thước của hình ảnh nền.
Tìm hiểu cách tạo một hình nền trang đầy đủ với CSS.
Hình ảnh toàn trang
Tìm hiểu cách tạo một hình ảnh nền bao gồm toàn bộ cửa sổ trình duyệt. Ví dụ sau đây cho thấy hình ảnh nền đáp ứng toàn màn hình [và nửa màn hình]:
Demo - Hình nền toàn trang
Demo - Hình ảnh nền nửa trang
Cách tạo hình ảnh chiều cao đầy đủ
Sử dụng một phần tử container và thêm hình ảnh nền vào thùng chứa với height: 100%
. Mẹo: Sử dụng 50% để tạo hình nền nửa trang. Sau đó sử dụng các thuộc tính nền sau để trung tâm và mở rộng hình ảnh một cách hoàn hảo:Tip: Use 50% to create a half page background image. Then use the following background properties to center and scale the image perfectly:
Lưu ý: Để đảm bảo rằng hình ảnh bao gồm toàn bộ màn hình, bạn cũng phải áp dụng height: 100%
cho cả hai và: To make sure that the image covers the whole screen,
you must also apply height: 100%
to both and :
Thí dụ
cơ thể, html {& nbsp; & nbsp; chiều cao: 100%;}
height: 100%;
}
.bg {& nbsp; / * Hình ảnh được sử dụng */& nbsp; Hình ảnh nền: URL ["img_girl.jpg"];
/* The image used */
background-image: url["img_girl.jpg"];
& nbsp; / * Chiều cao đầy đủ */& nbsp; Chiều cao: 100%;
height: 100%;
& nbsp; / * Trung tâm và mở rộng hình ảnh đẹp */& nbsp; Định vị nền: Trung tâm;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Hãy tự mình thử »
Hình nền nửa trang: