Thuộc tính background-image trong CSS
Thuộc tính background-image trong CSS được dùng để đặt hình ảnh nền cho một phần tử. Đây là một trong những thuộc tính nền cơ bản và thường dùng nhất.
Cú pháp
selector {
background-image: url('đường_dẫn_ảnh');
}Ví dụ thực hành
Dưới đây là ví dụ hoàn chỉnh đặt hình nền cho một div có viền và padding:
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
border: 5px dashed red;
padding: 10px;
background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");
min-height: 200px; /* Đảm bảo div có chiều cao để thấy hình nền */
}
</style>
</head>
<body>
<div id="demo">
<h1>www.tutorialspoint.com</h1>
<p>Tutorials Point bắt đầu từ ý tưởng rằng tồn tại một nhóm độc giả phản hồi tốt hơn với nội dung trực tuyến và thích học kỹ năng mới theo nhịp độ của mình từ không gian thoải mái của họ. Hành trình khởi đầu với một hướng dẫn HTML đơn lẻ vào năm 2006 và được khích lệ bởi phản hồi tích cực, chúng tôi mở rộng kho tài nguyên với nhiều hướng dẫn và bài viết liên quan về các chủ đề từ ngôn ngữ lập trình đến thiết kế web, học thuật và nhiều hơn nữa.</p>
</div>
</body>
</html>Lưu ý quan trọng
- Đường dẫn ảnh có thể là URL tuyệt đối hoặc tương đối
- Nếu ảnh nhỏ hơn phần tử, nó sẽ lặp lại theo mặc định (xem
background-repeat) - Có thể đặt nhiều hình nền bằng cách phân cách bằng dấu phẩy
- Sử dụng
background-image: none;để xóa hình nền