Hình nền HTML
Hình nền có thể được chỉ định cho hầu hết mọi phần tử HTML.
Hình nền trên một phần tử HTML
Để thêm hình nền trên một phần tử HTML, hãy sử dụng stylethuộc tính HTML và thuộc tính CSS background-image:
Thí dụ
Thêm hình nền trên phần tử HTML:
<div style="background-image: url('img_girl.jpg');">
Bạn cũng có thể chỉ định hình nền trong <style>
phần tử, trong <head>
phần:
Thí dụ
Chỉ định hình nền trong <style>
phần tử:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
Hình nền trên một trang
Nếu bạn muốn toàn bộ trang có hình nền, bạn phải chỉ định hình nền trên <body>phần tử:
Thí dụ
Thêm hình nền cho toàn bộ trang:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Bối cảnh Lặp lại
Nếu hình nền nhỏ hơn phần tử, hình ảnh sẽ tự lặp lại, theo chiều ngang và chiều dọc, cho đến khi nó đến cuối phần tử:
Thí dụ
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
Để tránh hình nền tự lặp lại, hãy đặt thuộc background-repeattính thành no-repeat.
Thí dụ
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Bìa nền
Nếu bạn muốn hình nền bao phủ toàn bộ phần tử, bạn có thể đặt thuộc background-sizetính thành
cover.
Ngoài ra, để đảm bảo toàn bộ phần tử luôn được bao phủ, hãy đặt thuộc
background-attachmenttính thànhfixed:
Bằng cách này, hình nền sẽ bao phủ toàn bộ phần tử mà không bị kéo giãn (hình ảnh sẽ giữ nguyên tỷ lệ ban đầu):
Thí dụ
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Căng nền
Nếu bạn muốn hình nền kéo dài để vừa với toàn bộ phần tử, bạn có thể đặt thuộc background-sizetính thành
100% 100%:
Hãy thử thay đổi kích thước cửa sổ trình duyệt, và bạn sẽ thấy rằng hình ảnh sẽ kéo dài, nhưng luôn bao phủ toàn bộ phần tử.
Thí dụ
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Tìm hiểu thêm CSS
Từ các ví dụ trên, bạn đã biết rằng hình nền có thể được tạo kiểu bằng cách sử dụng các thuộc tính nền CSS.
Để tìm hiểu thêm về các thuộc tính nền CSS, hãy nghiên cứu Hướng dẫn nền CSS của chúng tôi .