Bài 6: CSS Backgrounds
Các thuộc tính Background trong CSS bao gồm:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Background Color
Thuộc tính background-color xác định màu nền cho các phần tử
Background Color của một trang được xác định theo cấu trúc sau:
Ví dụ 1:
body {
background-color: lightblue;
}Trong CSS, có nhiều cách định kiểu màu, thường được sử dụng theo các cách sau:
- Theo tên tiếng anh – ví dụ: “Red”- màu đỏ
- Theo kết hợp giá trị màu RGB – ví dụ: “rgb(255, 0, 0)”- màu đỏ
- Theo hệ thập lục phân HEX – ví dụ: “#ff0000” – màu đỏ
Bạn có thể tham khảo bài
để hiểu rõ hơn về thuộc tính này.
Trong ví dụ dưới đây, thẻ <h1>, <p> và <div> sẽ có background color khác nhau:
Ví dụ 2:
h1 {
background-color: green;
}div {
background-color: lightblue;
}
p {
background-color: yellow;
}Background Image
Thuộc tính background-image xác định một hình ảnh làm background cho một phần tử.
Mặc định thì hình ảnh sẽ được lặp lại vì thế nó bao phủ toàn bộ phần tử.
Background image của một trang được xác định theo cấu trúc sau:
Ví dụ 3:
body {
background-image: url(“paper.gif”);
}Dưới đây là ví dụ về sự kết hợp không tốt giữa văn bản và background (hình nền)
Ví dụ 4:
body {
background-image: url(“bgdesert.jpg”);
}
Background Image – Lặp lại ảnh theo chiều dọc hoặc ngang
Mặc định thì thuộc tính background-image sẽ lặp ảnh cả 2 dạng dọc và ngang (horizontally và vertically).
Một số ảnh nên được lặp ngang hoặc dọc, nếu không thì trông nó rất là xấu, không đẹp mắt, giống như sau:
Ví dụ 5:
body {
background-image: url(“gradient_bg.png”);
}
Nếu như ảnh trên chỉ được lặp lại theo chiều ngang (background-repeat: repeat-x;), thì sẽ trông tốt hơn:
Ví dụ 6:
body {
background-image: url(“gradient_bg.png”);
background-repeat: repeat-x;
}
Lưu ý: Để lặp lại một image theo chiều dọc (vertically), chúng ta set background-repeat: repeat-y;
Background Image – Thiết lập vị trí và không lặp
Để hiển thị hình nền chỉ một lần cũng được xác định bởi thuộc tính background-repeat:
Ví dụ 7:
body {
background-image: url(“img_tree.png”);
background-repeat: no-repeat;
}
Trong ví dụ trên background image hiển thị cùng nơi với text. Chúng ta muốn thay đổi vị trí của hình ảnh, để nó không che khuất text quá nhiều.
Vị trí của hình ảnh được xác định với thuộc tính background-position:
Ví dụ 8:
body {
background-image: url(“img_tree.png”);
background-repeat: no-repeat;
background-position: right top;
}
Background Image – Cố định vị trí
Để chỉ định ảnh nền sẽ cố định (tức là nó sẽ không bị di chuyển mất khi cuộn), sử dụng thuộc tính background-attachment:
Ví dụ 9:
body {
background-image: url(“img_tree.png”);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Thuộc tính background – Viết code ngắn
Để rút ngắn code, bạn có thể chỉ định tất cả các thuộc tính background trên cùng một dòng duy nhất. Nó được gọi là thuộc tính Shorthand.
Ví dụ 10:
body {
background: #ffffff url(“img_tree.png”) no-repeat right top;
}
Khi sử dụng thuộc tính shorthand thì thứ tự giá trị thuộc tính sẽ là :
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Nếu nhu cầu của bạn không cần sử dụng hết thuộc tính này trong shorthand thì không quan trọng, bạn chỉ việc không đưa nó vào miễn sao vẩn theo thứ tự như trên là được.
Tất cả các thuộc tính Background trong CSS
| Thuộc tính | Mô tả |
|---|---|
| background | Xác định tất cả các thuộc tính của background trong một khai báo |
| background-attachment | Xác định thành phần hình nền được cố định hoặc cuộn so với trang. Được sử dụng kèm với giá trị background-image. |
| background-color | Xác định màu nền cho một phần tử. |
| background-image | Xác định hình nền cho một phần tử. |
| background-position | Xác định vị trí hình ảnh cho phần tử. Được sử dụng kèm với giá trị background-image |
| background-repeat | Xác định hình nền sẽ được lặp lại. |
