Màu nền của một trang web làm cho trang web thêm sinh động thêm hấp dẫn, nó thể hiện màu sắc riêng cho một trang web. Thuộc tính background
sẽ định màu nền, ảnh nền cho một trang web cũng như các kỹ thuật định vị, điều chỉnh ảnh nền.
background trong CSS
background-color
background-color
là thuộc tính giúp định màu nền cho thành phần trên một trang web.
<!DOCTYPE html> <html> <head> <title>Background</title> <style type="text/css"> body { background-color: #fd1b1f; } </style> </head> <body> <h1>Chào mừng các bạn đến với stdio</h1> </body> </html>
![Màu nền background-color trong CSS.](https://resources.stdio.vn/content/article/5ef62e745ef9e26f89a5c8de/resources/res-1596881720-1596881720063.png)
background-image
background-image
là thuộc tính cấu hình nền của thành phần bằng hình ảnh.
![background-image trong CSS.](https://resources.stdio.vn/content/article/5ef62e745ef9e26f89a5c8de/resources/res-1596882334-1596882334118.png)
<!DOCTYPE html> <html> <head> <title>Background</title> <style type="text/css"> body { background-image: url("icon.png"); } </style> </head> <body></body> </html>
background-repeat
background-repeat
làm cho ảnh có thể lặp lại theo chiều ngang hoặc dọc khi ảnh nhỏ hơn kích thước của thành phần chứa nó. background-repeat
có 4 giá trị:
repeat-x
: lặp theo chiều trục Ox (chiều ngang).repeat-y
: lặp theo chiều trục Oy (chiều dọc).repeat
: lặp cả 2 chiều, đây là giá trị mặc định.no-repeat
: không lặp lại.
body {
background-image: url(icon.png); background-repeat: repeat; }
![](https://resources.stdio.vn/content/article/5ef62e745ef9e26f89a5c8de/resources/res-1596881894-1596881894785.png)
background-position
background-position
quy định ảnh nền xuất hiện tính từ vị trí nào trong thành phần. Mặc định khi ảnh nền được chèn vào sẽ nằm bên trái/trên màn hình.
background-position
dùng hai giá trị để biểu diễn tọa độ muốn đặt ảnh nền, có nhiều loại đơn vị có thể sử dụng như: centimeters
, pixels
, inches
, … hay đơn vị quy đổi như %
.
Ví dụ:
background-position: 30px 50px;
background-position: 50% 50%;
background-position: top left;
background-attachment
background-attachment
là thuộc tính sử dụng để cố định một ảnh nền so với trang web. background-attachment
có 2 giá trị:
- Scroll: ảnh sẽ cuộn theo trang web.
- Fixed: ảnh cố định hay nói các khác ảnh này sẽ đứng yên.
scroll
: ảnh nền sẽ trôi (cuộn) theo trang, đây là giá trị mặc định.fixed
: ảnh nền sẽ không trôi theo trang.local
: ảnh nền sẽ trôi theo nội dung.initial
: trả lại tính chất vốn có.inherit
: kế thừa tính chất của thành phần cha.
Viết tắt lại các thuộc tính của background
Vì trên trang web có nhiều nội dung để viết nên có thể viết tắt để cấu hình nhiều tính chất chung 1 dòng, vừa tốt cho khả năng tổ chức, vừa gọn mã, thay vì viết tất cả thuộc tính cấu hình background
như: background-image
, background-repeat
, background-color
, ... có thể viết như sau:
body { background: #fd1b1f url('icon.png') no-repeat 50% 50% fixed; }