Bài viết này chúng ta sẽ cùng tìm hiểu về cách tạo màu nền và ảnh nền cho các thành phần trên trang web với thuộc tính background trong CSS. 1. Cách tạo màu nền (Background Color) Thuộc tính background-color xác định màu nền cho một thành phần nào đó khi được chỉ định Đoạn mã sau sẽ quy định màunền của toàn bộ trang web là màu đen 1 body { background-color : #000000 } Các giá trị của background-color có thể là: *. Tên màu (tiếng anh), ví dụ: black, green… *. Hệ màu RGB, ví dụ: rgb(255,0,0) *. Hệ hex, ví dụ: #000000 *. transparent: trong suốt (đây là một giá trị đặc biệt của background-color).
2. Cách tạo ảnh nền (Background Image)
Để tạo ảnh nền cho một thànhphần nào đó, ta chỉ cần khai báo thuộc tính background-imgde cho thành phần đó. Ví dụ: 1 body { background-image : url (background.gif) } Với background.gif là file hình được đặt chung với thư mục chứa file CSS. Ví dụ background image Hình bên là một ví dụ thường thấy về background image màchúng ta thường thấy trên cáctrang web Ở đây thành phần tiêu đề được sử dụng một ảnh nền.
3. Background repeat css background repeat
Khi sử dụng một ảnh làm nền, nếu ảnh đó có kích thước nhỏhơn độ lớn của thành phần đóthì ảnh nền sẽ được lặp lại đểphủ kín không gian còn lại. Thuộc tính background-repeat cho phép ta kiểm soát sự lặp lại của ảnh nền. Thuộc tính này có 4 thuộc tính như sau: - repeat-x: chỉ lặp lại theo phương nằm ngang (như hình bên) - repeat-y: chỉ lặp lại theo phương đúng - repeat: lặp lại theo cả 2 phương, đây là giá trị mặt định khi thuộc tính background-repeat không được khai báo. - no-repeat: không lặp lại. Ở ví dụ dưới đây mình có một tấm hình có kích thước 65x35px để làm nền cho một thành phần