CSS Background
Trong bài này chúng ta sẽ tìm hiểu về các thuộc tính liên quan đến background
Background-color
Thuộc tính background-color quy định màu nền của một phần tử.
Cú pháp
background-color: value;Ví dụ
body {
background-color: red;
}
Background-image
Thuộc tính background-image quy định ảnh nền của một phần tử bằng một hình ảnh.
Mặc định ảnh nền sẽ lặp lại để làm sao bao phủ toàn bộ phần tử.
Cú pháp
background-image: url(image-url);Ví dụ
body {
background-image: url("paper.gif");
}
Background-repeat
Cú pháp
background-repeat: value;Bài toán
Mặc định background-image sẽ tự động lặp lại theo chiều ngang và chiều dọc để có thể bao phủ được hết phần tử tuy nhiên trong một vài trường hợp ảnh nền chỉ được lặp lại theo 1 trong 2 chiều vì chiều còn lại đã đủ kích thước gây ra kết quả chúng ta không mong muốn lắm như ảnh dưới.
Trong trường hợp này nếu ảnh có thể lặp lại theo chiều ngang có thể sẽ ổn hơn, lúc này ta sẽ dùng background-repeat: repeat-x; để thực hiện yêu cầu này.
Repeat
Giá trị background-repeat: repeat; là giá trị mặc định, giá trị này sẽ làm cho hình nền lặp lại theo cả chiều ngang và dọc.
body {
background-image: url("img_tree.png");
background-repeat: repeat;
}
No-repeat
Giá trị background-repeat: no-repeat; sẽ làm cho hình nền sẽ hiển thị 1 lần và không lặp lại theo hướng nào cả.
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Repeat-x
Giá trị background-repeat: repeat-x; sẽ làm cho hình nền lặp lại theo chiều ngang (trục x).
body {
background-image: url("img_tree.png");
background-repeat: repeat-x;
}
Repeat-y
Giá trị background-repeat: repeat-y; sẽ làm cho hình nền lặp lại theo chiều dọc (trục y).
body {
background-image: url("img_tree.png");
background-repeat: repeat-y;
}
Space
Giá trị background-repeat: space; cũng khá giống với repeat được liệt kê như sau:
Giống:
Cả
repeatvàspaceđều lặp theo 2 chiều.
Khác:
Spacesẽ cố gắng lặp nhiều nhất có thể nhưng sẽ không làm cho hình bị cắt xén(mất một phần)Sau khi cố gắng xong thì khoảng trắng sẽ được chia đều giữa các hình nền được lặp
body {
background-image: url("img_tree.png");
background-repeat: space;
}
Round
Giá trị background-repeat: round; cũng khá giống với space về việc ảnh nền sẽ không bị cắt nhưng khác space ở chỗ ảnh nền khi round sẽ bị kéo dài, thu nhỏ để không còn khoảng trống nào.
body {
background-image: url("img_tree.png");
background-repeat: round;
}
Background-position
Thuộc tính background-position dùng để quy định vị trí của ảnh nền.
Cú pháp
background-position: value;Ví dụ
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Giá trị
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Chúng ta có thể sử dụng tên để đặt giá trị.
Nếu có duy nhất một giá trị, giá trị còn lại mặc định là center
x% y%
Chúng ta có thể dùng đơn vị % để gán giá trị.
Giá trị đầu tiên là vị trí theo trục x và giá trị thứ 2 là theo trục y.
Góc top left là 0% 0%
Góc right bottom là 100% 100%
Nếu chỉ có 1 giá trị thì giá trị còn lại mặc định là 50%
Mặc định giá trị là 0% 0%
xpos ypos
Chúng ta có thể sử dụng đơn vị tuyệt đối để làm giá trị
Giá trị đầu tiên là vị trí theo trục x và giá trị thứ 2 là theo trục y.
Góc top left là 0 0
Đơn vị có thể là px hoặc bất cứ đơn vị hợp lệ nào.
Nếu chỉ có 1 giá trị thì giá trị còn lại mặc định là 50%
Bạn có thể phối hợp % và giá trị tuyệt đối với nhau.
Background-attachment
Trong một vài trường hợp nội dung dài thì trình duyệt sẽ xuất hiện một thanh cuộn, lúc này mặc định ảnh nền sẽ tự động chạy theo nội dung khi cuộn. Để giữ cho ảnh nền đứng yên khi cuộn lúc này chúng ta dùng thuộc tính background-attachment dùng để quy định background sẽ cuộn theo nội dung hay sẽ đứng yên khi nội dung di chuyển.
Cú pháp
background-attachment: value;Scroll
background-attachment: scroll;Giá trị mặc định, ảnh nền sẽ cuộn theo nội dung
Fixed
background-attachment: fixed;Background sẽ đứng yên khi cuộn nội dung
Background shorthand
Cú pháp shorthand hay viết tắt giúp chúng ta viết nhiều cấu hình về background cho một phần tử cùng lúc thay vì chúng ta viết từng thuộc tính riêng biệt.
Ví dụ
Thay vì viết
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}Chúng ta có thể viết tắt như sau:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}Cú pháp
background: background-color background-image background-repeat
background-attachment background-position;Last updated