background – tô màu nền, ảnh nền, lặp nền, vị trí nền.
1. Thuộc tính background dùng để làm gì?
CSS cho phép bạn thêm màu nền, ảnh nền và điều chỉnh cách hiển thị nền cho các phần tử.
Các thuộc tính thường dùng:
background-color: tô màu nềnbackground-image: thêm ảnh nềnbackground-repeat: lặp ảnh hay khôngbackground-position: đặt vị trí ảnh nềnbackground-size: điều chỉnh kích thước ảnh nềnbackground-attachment: ảnh nền cuộn theo hay cố định
Bạn có thể viết riêng từng thuộc tính, hoặc gộp chung bằng background.
2. Tô màu nền – background-color
.box {
background-color: #fce4ec;
}
Bạn có thể dùng:
- Mã màu HEX:
#ffcc00 - RGB:
rgb(255, 204, 0) - HSL:
hsl(45, 100%, 60%) - Tên màu:
pink,lightblue,gray
3. Thêm ảnh nền – background-image
.container {
background-image: url('images/bg-pattern.png');
}
- Dùng đường dẫn tương đối hoặc tuyệt đối đến ảnh
- Ảnh nền mặc định sẽ lặp lại
4. Kiểm soát lặp ảnh – background-repeat
| Giá trị | Ý nghĩa |
|---|---|
repeat | (mặc định) lặp cả chiều ngang & dọc |
no-repeat | Không lặp |
repeat-x | Lặp ngang |
repeat-y | Lặp dọc |
Ví dụ:
background-repeat: no-repeat;
5. Vị trí ảnh nền – background-position
background-position: top left;
Các giá trị thường dùng:
top,bottom,left,right,center- Hoặc theo tọa độ:
50% 50%,100px 20px
Ví dụ:
background-position: center center;
6. Kích thước ảnh nền – background-size
| Giá trị | Kết quả |
|---|---|
auto | Kích thước gốc |
cover | Phủ kín toàn bộ phần tử, có thể bị cắt |
contain | Hiển thị toàn ảnh, không cắt, có thể dư nền |
100% 100% | Giãn theo chiều ngang và dọc |
Ví dụ:
background-size: cover;
7. Ảnh nền cuộn hay không – background-attachment
background-attachment: fixed;
scroll(mặc định): nền cuộn theo nội dungfixed: nền đứng yên khi cuộn
8. Viết gộp tất cả bằng background
background: url('bg.jpg') no-repeat center center / cover;
Cú pháp viết gộp:
background: [màu] [ảnh] [repeat] [position] / [size];
9. Thực hành
style.css
.body-bg {
background-color: #f3f3f3;
}
.box-color {
background-color: #ffeb3b;
padding: 20px;
margin-bottom: 20px;
}
.box-image {
background-image: url('https://picsum.photos/400/200');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 200px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bài 8 – Background</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="body-bg">
<div class="box-color">
Đây là nền màu vàng tươi
</div>
<div class="box-image">
Đây là ảnh nền không lặp, canh giữa và cover
</div>
</body>
</html>
10. Ghi nhớ
| Thuộc tính | Tác dụng |
|---|---|
background-color | Tô màu nền |
background-image | Thêm ảnh nền |
background-repeat | Lặp hay không |
background-position | Căn vị trí ảnh nền |
background-size | Phóng to, thu nhỏ ảnh |
background-attachment | Cuộn hay giữ cố định |
Thảo luận