Trong CSS, thuộc tính background cho phép chúng ta trang trí nền cho một phần tử. Chúng ta hãy cùng tìm hiểu những thuộc tính giúp định dạng background.
background-attachment
Thuộc tính này cho phép chúng ta định vị trí của ảnh nền theo khung hình. Để hiểu rõ hơn, bạn có thể xem qua ví dụ tại đây. Thuộc tính này có 3 giá trị:
- fixed: ảnh nền sẽ được cố định với tất cả phần tử.
- local: ảnh nền sẽ thay đỏi khi chúng ta scroll nội dung.
- scroll: ảnh nền sẽ được cố định với phần tử chứa nó.
background-color
Thuộc tính này cho phép chúng ta đặt màu nền cho phần tử. Nó nhận giá trị là một giá trị màu sắc. Bạn có thể xem thêm ví dụ để hiểu rõ hơn.
background-image
Thuộc tính này cho phép chúng ta sử dụng một hoặc một số tấm hình làm ảnh nền. Nó nhận giá trị là một đường dẫn hoặc url đến tấm hình. Bạn có thể xem ví dụ để hiểu rõ hơn.
background-position
Thuộc tính này cho phép chúng ta đặt vị trí tương đối của ảnh nền so với phần tử chứa nó. Các bạn có thể xem ví dụ để hiểu rõ hơn.
background-repeat
Thuộc tính này cho phép chúng ta điều khiển cách ảnh nền lặp lặp để phù hợp với kích thước phần tử. Bạn có thể xem ví dụ để hiểu rõ hơn.
background-size
Thuộc tính này cho phép chúng ta định kích thước của ảnh nền. Ảnh nền có thể giữ nguyên kích thước của nó hoặc cố gắng scale cho vừa với kích thước của phần tử …vv Để hiểu rõ hơn, bạn có thể xem ví dụ.
background
Thuộc tính background cho phép chúng ta kết hợp các thuộc tính phía trên một cách ngắn gọn.
|
1 2 3 4 5 6 7 8 9 10 11 |
/* Tương đương sử dụng background-color */ background: green; /* Tương đương kết hợp background-image và background-repeat */ background: url("test.jpg") repeat-y; /* Tương đương sử dụng background-origin và background-color */ background: border-box red; /* Tương đương sử dụng background-repeat, background-position, background-size và background-image*/ background: no-repeat center/80% url("../img/image.png"); |
