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

body {background-color: #000000}

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ụ:

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ác trang 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 <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

Xem trang: 1 2

Tagged as: css background, css background position, css background repeat, tao nen voi css, thuoc tinh background, Thuoc tinh CSS

Peter Tran là một Coder, công việc hiện tại của anh ấy là phát triển ứng dụng web với PHP, thời gian rảnh anh ấy thường viết Blog chia sẻ những kiến thức về lập trình và phát triển website. Hãy xem trang cá nhân của anh ấy trên Facebook và Twitter

Bài liên quan

• Tổng hợp các bài học CSS
• 5 cách viết tắt thường dùng trong CSS
• CSS Image Sprites là gì?
• CSS absolute position
• Định dạng văn bản trong CSS (Phần 2)