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 phần tử HTML
Để thêm hình nền vào phần tử HTML, hãy sử dụng thuộc tính style HTML và thuộc tính background-image CSS:
Ví dụ
Thêm hình nền vào phần tử HTML:
<p style="background-image: url('img_girl.jpg');"> Hãy tự mình thử » Bạn cũng có thể chỉ định hình nền trong phần tử <style> , trong phần <head> :
Ví dụ
Chỉ định hình nền trong phần tử <style> :
<style>
p {
background-image: url('img_girl.jpg');
}
</style> Hãy tự mình thử »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 phần tử <body> :
Ví dụ
Thêm hình nền cho toàn bộ trang:
<style>
body {
background-image: url('img_girl.jpg');
}
</style> Hãy tự mình thử »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 chạm đến phần cuối của phần tử:
Để tránh hình nền lặp lại, hãy đặt thuộc tính background-repeat thành no-repeat .
Ví dụ
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style> Hãy tự mình thử » 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 tính background-size để cover.
Ngoài ra, để đảm bảo toàn bộ phần tử luôn được che phủ, hãy đặt thuộc tính background-attachment fixed:
Bằng cách này, hình nền sẽ bao phủ toàn bộ phần tử, không bị giãn (hình ảnh sẽ giữ nguyên tỷ lệ ban đầu):
Ví dụ
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style> Hãy tự mình thử »Căng nền
Nếu bạn muốn hình nền co giãn để vừa với toàn bộ phần tử, bạn có thể đặt thuộc tính background-size 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 hình ảnh sẽ giãn ra nhưng luôn che toàn bộ phần tử.
Ví dụ
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style> Hãy tự mình thử »Bài tập HTML
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 về nền CSS của chúng tôi.
