<

Bài 10: Tạo nền trong CSS (CSS background)

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àu nền của toàn bộ trang web là màu đen

Các giá trị của background-colorcó 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ành phần nào đó, ta chỉ cần khai báo thuộc tính background-imgde cho thành phần đó.
Ví dụ:

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ác trang web
Ở đây thành phần tiêu đề được sử dụng một ảnh nền.

3. Background repeat

Ở 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 <div class=”box”> có độ rộng 170px và độ cao 150px. Khi khai báo thuộc tính background-repeat sẽ có các kết quả tương ứng sau đây:

Khi cho repeat-x

Khi cho repeat-y

Khi cho repeat (Giá trị Mặc định)

Khi cho no-repeat

3. Background attachment

Background-attachment là một thuộc tính cho phép xác định tính cố định của ảnh nền so với với nội dung trang web. Thuộc tính này có 2 giá trị:
+ scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định.
+ fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh nền sẽ được cố định khi cuộn trang.