Thiết lập màu nền cho phần tử dùng thuộc tính CSS background-color chỉ ra giá trị màu theo tên, hoặc theo mã hex, hoặc theo trộn rgb. Hãy xem phần màu sắc và thuộc tính color để biết tên các màu.
Chú ý là ngoài màu nền cho phần tử với thuộc tính background-color thì còn có thể thiết lập nhiều lớp nền là ảnh nền cho phần tử bằng thuộc tính background-image. Màu nền được vẽ sau ảnh nền [nếu có].
Ví dụ về màu nền #41c04d
Ví dụ về màu nền rgb[135,206,235]
Ví dụ về màu nền coral
Ví dụ về màu nền #41c04d
Ví dụ về màu nền rgb[135,206,235]
Ví dụ về màu nền coral
Chú ý màu nền được tô trong phạm vi [tô phần content, tô cả phần padding, hay cả phần border] được thiết lập thông qua thuộc tính
Ảnh nền với background-image
Thuộc tính background-image
dùng để chỉ ra ảnh được dùng làm nền cho phần tử. Nó được vẽ trên màu nền của phần tử.
Cú pháp:
background-image: image | none
Trong đó:
Mặc định thuộc tính background-image lặp lại ảnh nền theo cả chiều đứng và ngang để tô kín kích thước phần tử.
Ví dụ bạn có url ảnh là: //cdn0.iconfinder.com/data/icons/expenses-vs-income/30/__beauty_health_cosmetics_heart-32.png
Dùng ảnh đó làm nền cho một phần tử div như ví dụ:
Ví dụ về ảnh nền với background-image
Phần tử được tô bởi background-color rồi đên background-image
Ví dụ về ảnh nền với background-image
Ví dụ về ảnh nền với background-image
Phần tử được tô bởi background-color rồi đên background-image
Ví dụ về ảnh nền với background-image
Có thể thiết lập nhiều ảnh nền chồng lên nhau bằng cách liệt kê nhiều
background-image: image | none0 cách nhau bởi dấu phảy
background-image: image | none1
.nen { background-image: url[url-image1], url[url-image2]; }
Lặp lại ảnh nền: background-repeat
Mặc định ảnh nền lặp lại theo cả chiều x và chiều y. Với thuộc tính thêm background-repeat bạn có thể điều khiển tính lặp lại này, bằng các giá trị
Cú pháp:
background-repeat: valuex valuey;
Trong đó: valuex và valuey là kiểu lặp lại theo chiều x và y có thể nhận
background-image: image | none
2 - lặp lại [ảnh có thể bị cắt tại biên của box]background-image: image | none
3 - lặp lại - dàn ảnh có khoảng cách sao cho ảnh không bị cắt tại biênbackground-image: image | none
4 - lặp lại - ảnh có thể bị thu phóng để không bị cắt tại biênbackground-image: image | none
5 - không lặp lại
Ví dụ: ảnh lặp lại cả chiều x và y thì viết:
background-repeat: repeat repeat;
Ví dụ trên có thể viết ngắn gọn một giá trị
background-repeat: repeat;
Tương tự, có một số trường hợp viết ngắn ngọn bạn chỉ cần viết một giá trị bao gồm:
background-image: image | none
2 lặp lại theo x, y [tương đươngbackground-image: image | none
7]background-image: image | none
8 chỉ lặp theo chiều x [tương đươngbackground-image: image | none
9]Ví dụ về ảnh nền với background-image
Phần tử được tô bởi background-color rồi đên background-image
Ví dụ về ảnh nền với background-image
Ví dụ về ảnh nền với background-image
Phần tử được tô bởi background-color rồi đên background-image
Ví dụ về ảnh nền với background-image
background-image: image | none
5 không lặp theo cả chiều x và y [tương đươngVí dụ về ảnh nền với background-image
Phần tử được tô bởi background-color rồi đên background-image
Ví dụ về ảnh nền với background-image
background-image: image | none
4 tương đươngVí dụ về ảnh nền với background-image
Phần tử được tô bởi background-color rồi đên background-image
Ví dụ về ảnh nền với background-image
background-image: image | none
3 tương đươngVí dụ về ảnh nền với background-image
Phần tử được tô bởi background-color rồi đên background-image
Ví dụ về ảnh nền với background-image
Ví dụ về ảnh nền với background-image
Phần tử được tô bởi background-color rồi đên background-image
Ví dụ về ảnh nền với background-image
Ví dụ về ảnh nền với background-image
Phần tử được tô bởi background-color rồi đên background-image
Ví dụ về ảnh nền với background-image
background-attachment
Thuộc tính
8 để điều khiển xem ảnh nền là cố định trong phần tử hoặc cuộn theo trang. Với các giá trị như
Ví dụ về ảnh nền với background-image
Phần tử được tô bởi background-color rồi đên background-image
Ví dụ về ảnh nền với background-image
9 nền không cuộn theo phần tử [cố định với biên trang],
Ví dụ về ảnh nền với background-image
Phần tử được tô bởi background-color rồi đên background-image
Ví dụ về ảnh nền với background-image
.nen { background-image: url[url-image1], url[url-image2]; }0 trôi theo phần tử [nền cố định với biên phần tử],
.nen { background-image: url[url-image1], url[url-image2]; }1 nền cuộn theo content của phần tử.