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>
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.
<!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;
}
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;
}