Thuộc tính background dùng để định dạng nền cho phần tử HTML.
Dưới đây là một số thuộc tính background:
- background-color (thiết lập màu nền)
- background-image (thiết lập hình nền)
- background-repeat (thiết lập sự lặp lại của hình nền)
- background-attachment (thiết lập vị trí cố định cho hình nền)
- background-position (thiết lập vị trí của hình nền)
Tóm tắt nội dung
Background Color – Mầu nền
Thuộc tính background-color chỉ định màu nền của phần tử.
Màu nền của một trang được đặt như sau:
|
0 1 2 |
body { background-color: lightblue; } |
See the Pen background by nguyen tien (@nguyentien365) on CodePen.
Với CSS, màu sắc thường được chỉ định bởi:
- Tên màu/giá trị HEX/giá trị RGB hợp lệ – như “red”, “#ff0000” hoặc “rgb(255,0,0)”.
Xem các giá trị màu CSS để biết danh sách đầy đủ các giá trị màu có thể có.
Trong ví dụ bên dưới, các phần tử <h1>, <p> và <div> có các màu nền khác nhau:
|
0 1 2 3 4 5 6 7 8 9 10 |
h1 { background-color: green; } div { background-color: lightblue; } p { background-color: yellow; } |
See the Pen backgroun color by nguyen tien (@nguyentien365) on CodePen.
Background Image – Hình nền
Thuộc tính hình nền background-image chỉ định hình ảnh để sử dụng làm nền của phần tử.
Theo mặc định, hình ảnh được lặp lại để nó bao gồm toàn bộ phần tử.
Hình nền cho một trang có thể được đặt như sau:
|
0 1 2 |
body { background-image: url("paper.gif"); } |
url(“paper.gif”): link hình bạn muốn đặt;
Lưu ý: Khi sử dụng hình nền, hãy sử dụng hình ảnh có mầu sắc tương phản với mầu chữ.
Hình nền – Lặp lại theo chiều ngang hoặc theo chiều dọc
(Repeat Horizontally or Vertically)
Theo mặc định, thuộc tính background-image lặp lại một hình ảnh theo cả chiều ngang và chiều dọc.
*Mẹo:
Để lặp lại hình ảnh theo chiều dọc, ta sử dụng:
background-repeat: repeat-y;Để lặp lại hình ảnh theo chiều dọc, ta sử dụng:
background-repeat: repeat-x;
|
0 1 2 3 |
body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; } |
Hình nền – đặt cố định không lặp lại
(Set position and no-repeat)
Chỉ hiển thị hình nền một lần không lặp lại, ta sử dụng: background-repeat no-repeat;
|
0 1 2 3 |
body { background-image: url("img_tree.png"); background-repeat: no-repeat; } |
Trong ví dụ trên, hình nền được hiển thị ở cùng một nơi với văn bản. Nếu bạn muốn thay đổi vị trí của hình ảnh, để nó không làm ảnh hưởng tới văn bản quá nhiều, bạn sử dụng background-position
|
0 1 2 3 4 |
body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; } |
Giá trị của background-position bạn có thể set nhiều vị trí khác nhau: center, right, left, …..
Background Image – Fixed position
Thuộc tính này sẽ đặt cố định hình ảnh nền và sẽ không cuộn với phần còn lại của trang. Sử dụng thuộc tính: background-attachment
|
0 1 2 3 4 5 |
body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; } |
See the Pen The background-image is fixed. by nguyen tien (@nguyentien365) on CodePen.
Background – Shorthand property
Để rút ngắn mã, cũng có thể chỉ định tất cả các thuộc tính nền trong một thuộc tính duy nhất. Đây được gọi là một Shorthand property – Tốc ký.
Hiểu đơn giản là ta nhóm chúng lại và mỗi thuộc tính cách nhau bởi khoảng trắng, vậy thôi :))
|
0 1 2 |
body { background: #ffffff url("img_tree.png") no-repeat right top; } |
Khi sử dụng thuộc tính Shorthand property (tốc ký), thứ tự của các giá trị thuộc tính là:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
Thuộc tính trong sử dụng tốc ký có thể thiếu, nhưng phải đảm bảo đúng thứ tự.
Tất cả thuộc tính của Background trong CSS
| Thuộc tính | Mô tả |
|---|---|
| background | Đặt tất cả các thuộc tính nền trong một khai báo |
| background-attachment | Đặt xem hình nền có cố định hay cuộn với phần còn lại của trang |
| background-clip | Chỉ định vùng vẽ của nền |
| background-color | Đặt mầu nền cho một vùng chọn |
| background-image | Đặt ảnh nền cho một vùng chọn |
| background-origin | Chỉ định vị trí của (các) hình nền |
| background-position | Đặt vị trí bắt đầu của ảnh nền |
| background-repeat | Điều chỉnh dạng hiển thị của hình nền (lặp lại hoặc không, các chiều lặp) |
| background-size | Chỉ định kích thước của hình nền |
