Bài giảng 5 tính chất đó là

5 tính chất chính của background mà bạn cần biết đó là:
• background-color : Đặt thuộc tính màu nền
• background-image : Dùng ảnh làm màu nền cho một element
• background-position : Ví trí của ảnh
• background-repeat : Tùy chỉnh ảnh nền có lặp hay không, lặp kiểu nào...
• background-attachment : Đặt chế đố ảnh nền scroll theo trang hoặc là ở vị trí cố định
Cách sử dụng đơn giản
background-color dùng khi bạn muốn đặt một màu solid cho một element, bạn có thể sử dụng
theo 1 trong 4 cách sau:
view source
print ?
1 background-color: #006600;
2 background-color: green;
3 background-color: rgb(0, 102, 0);
4 background-color: transparent;
background-image bạn có thể dùng một ảnh bất kỳ trên internet hoặc cùng server để làm nền cho
một element
view source
print ?
1 background-image: url( />2 background-image: url(../images/logo.png);
Nếu bạn dùng thẻ img thì người dùng có thể dễ dàng lưu lại file ảnh của bạn, nhưng nếu bạn
không muốn họ lưu lại, bạn có thể dùng background-image để gây khó khăn cho người dùng.
background-position giúp bạn đặt chính xác vị trí ảnh so với thẻ HTML
view source
print ?
1 background-position: left top; /* Đặt ảnh ở vị trí trên cùng bên trái */
2
background-position: 50px -10px; /* Đặt ảnh cách mép trái 50px và mép trên
10px */
3 background-position: 0% 50%; /* Căn ảnh theo % */
4 background-position: center center; /* Đặt ảnh ở chính giữa thẻ HTML */

background-repeat Tùy chỉnh ảnh nền có lặp hay không, lặp kiểu nào. Các giá trị chính của
background-repeat:
view source
print ?
1
background-repeat: repeat; /* Lặp theo 2 chiều ngang và dọc - Giá trị mặc
định */
2 background-repeat: repeat-y; /* Chỉ lặp theo chiều dọc */
3 background-repeat: repeat-x; /* Chỉ lặp theo chiều ngang */
4 background-repeat: no-repeat; /* Không lặp */
background-attachment hẳn bạn ít thấy đoạn mã CSS này, chúng ta chỉ cần khai báo khi bạn
muốn giữ nguyên ảnh nền khi di chuyển thanh cuộn (tham khảo twitter)
view source
print ?
1 background-image: url(bg.gif);
2 background-repeat: repeat-x;
3 background-attachment: fixed;
Cách sử dụng ngắn
Sau khi đã rõ các tính chất của background, thay vì việc phải khai báo từng tính chất, bạn có thể
khai báo thuộc tính background của một thẻ HTML như sau:
view source
print ?
1 background: color image position attachment repeat;
2 background: #fff url(../images/bg.gif) left top scroll no-repeat;
Thông thường tôi sử dụng:
view source
print ?
1 background: url(../images/bg.gif) #fff no-repeat left top;