CSS background là thuộc tính dùng để tạo màu nền và ảnh nền cho các thành phần của website.
Và để dễ học thì chúng ta sẽ không học các thuộc tính riêng lẽ, mà chúng ta sẽ học 5 cách sử dụng background cơ bản sau đây:
1. Tạo màu nền background-color
Thuộc tính background-color giúp định màu nền cho một thành phần nào đó trên trang web.
Cách viết:
Đoạn code trên sẽ làm cho trang web có màu nền là màu xanh.
Trong đó, giá trị của thuộc tính background-color có thể là:
- Mã màu hệ hex, ví dụ: #000000.
- Hệ màu RGB, ví dụ: rgb(255,255,0).
- Tên màu: red, blue, black.
2. Tạo ảnh nền background-image
Trường hợp mã màu đơn thuần không đủ đẹp mắt, thì chúng ta sẽ sử dụng thuộc tính background-image để định ảnh nền cho thành phần nào đó trên website.
Cách viết:
Đoạn code trên sẽ làm cho trang web có phần nền là file hình ảnh chấm bi chúng ta sử dụng.
Nên sử dụng file hình ảnh có phần mở rộng là *.gif, *.png
3. Tạo ảnh nền với repeat-x
Nếu chúng ta muốn tạo ra phần nền ngang giống như hình ảnh dưới đây
Thì chúng ta phải viết thuộc tính background-repeat như sau
Trong đó giá trị repeat-x làm cho file ảnh lặp theo chiều ngang.
4. Tạo ảnh nền với repeat-y
Nếu chúng ta muốn tạo ra phần nền dọc giống như hình ảnh dưới đây
Thì chúng ta phải viết thuộc tính background-repeat như sau
Trong đó giá trị repeat-y làm cho file ảnh lặp theo chiều dọc.
5. Tạo ảnh nền đứng yên khi kéo thanh trượt
Trường hợp này chúng ta phải sử dụng một file ảnh thật to để làm ảnh nền cho website.
Và kèm theo đó chúng ta sẽ phải sử dụng thuộc tính background-attachment: fixed, khi đó giá trị fixed sẽ làm cho ảnh nền đứng yên.
(phần này các bạn hãy xem video để thấy rõ hơn).
Xem hướng dẫn chi tiết trong video
