1. Thiết lập CSS màu nền cho background

Chúng ta có 2 thuộc tính là background-color hoặc background để định dạng với các giá trị màu là tên màu bằng tiếng anh hoặc mã màu đều được.

Ví dụ: Thiết lập màu nền cho toàn bộ trang là màu vàng.    

2. Thiết lập CSS ảnh nền cho background

Để thiết lập ảnh nền chúng ta có thuộc tính background-image với đường dẫn của hình nằm trong thẻ url.

Ví dụ : Thiết lập ảnh nền như sau

3. Tùy chỉnh lặp hoặc không lặp background

Khi bạn lấy một hình nào đó làm ảnh nền mà nếu hình đó nhỏ hơn so với kích thước trang web thì mặc định hình ảnh sẽ bị lặp lại nhiều lần để lấp đủ các khoảng trắng qua đó làm cho trang web xấu hơn chẳng hạn. Để khắc phục trường hợp này chúng ta có thuộc tính background-repeat, với các giá trị chính :

•  no-repeat : không lặp
•  repeat : cho phép lặp
•  repeat-x : lặp theo chiều ngang
•  repeat-y : lặp theo chiều dọc

no-repeat

repeat

repeat-x

repeat-y

4. Tùy chỉnh vị trí hiển thị cho background

Khi bạn đặt hình nền và muốn vị trí hiển thị ở một vị trí nào đó như top, right, left, center, bottom … thì bạn có thuộc tính backgound-position. Cấu trúc như sau:

Trong đó position1 và position2 gồm các giá trị :

•  top : trên cùng
•  right : bên phải
•  left : bên trái
•  center : ở giữa
•  bottom : dưới cùng

Lưu ý : Khi bạn chọn giá trị phải theo quy luật như : left top, left bottom, right top… chứ không được chọn left right nghĩa là vừa sang trái vừa sang phải vì sẽ không tuân theo quy luật tọa độ.

Ví dụ : Hiển thị background ở giữa

Ví dụ : Hiển thị background góc trên bên trái

Lời kết : Kết thúc bài hôm nay chúng ta đã tìm hiểu được các thuộc tính định dạng background trong CSS căn bản và quen thuộc của một website. Bài tới chúng ta sẽ cùng tìm hiểu cách sử dụng thuộc tính float trong CSS để thiết kế layout.

Chúc bạn thành công!