Các thuộc tính nền trong CSS giúp chúng ta tạo kiểu cho nền của các phần tử. Thuộc tính background là viết tắt để chỉ định nền của một phần tử. background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin và background-attachment cùng cấu thành các thuộc tính nền CSS.
Cú pháp
Cú pháp của thuộc tính CSS background như sau:
Selector { background: /*giá trị*/ }
Ví dụ
Các ví dụ sau minh họa thuộc tính CSS background:
<!DOCTYPE html> <html> <head> <style> #main { margin: auto; width: 300px; background-image: url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg"); background-repeat: no-repeat; background-size: cover; } #im { height: 200px; width: 200px; background-image: url("https://www.tutorialspoint.com/images/css.png"); background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div id="main"> <div id="im"></div> </div> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
Ví dụ khác
<!DOCTYPE html> <html> <head> <style> body { background-image: url("https://www.tutorialspoint.com/hcatalog/images/hcatalog-mini-logo.jpg"),url("https://www.tutorialspoint.com/hbase/images/hbase-mini-logo.jpg"),url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-position: 10% 10%, 40% 40%, 90% 10%; } </style> </head> <body> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
