 |
| image from www.freeimages.co.uk |
Background là thuộc tính quan trọng trong CSS, nó được dùng để tạo nền cho các thẻ mà dễ thấy nhất là thẻ body. Nền có hai kiểu: nền màu và nền dùng ảnh.
Nền màu là cách dùng nền phổ biến hơn cả, hầu hết các trang web đều sử dụng nền cho toàn trang là màu đơn sắc nào đó có khuynh hướng gần với màu trắng, nều màu cho các phần khác của trang thì đa dạng hơn. Có một số thuộc tính của background chỉ được hỗ trợ trong CSS3. Còn dưới đây là danh sách các thuộc tính chúng ta sẽ tìm hiểu trong ngày hôm nay:
Thuộc tính background-color
Cách dùng nền màu khá đơn giản, chẳng hạn:
body {background-color:#FF7357;}
hoặc:
h3 {background-color:#2E58FF;}
Còn bây giờ bạn sẽ thấy kết quả khi áp dụng đoạn code trên cho thẻ h3:
Tôi tạo nền cho thẻ h3 này có màu xanh
Như vậy là bạn đã kết thúc với cách dùng màu nền! Còn những 4 thuộc tính background khác nhưng tất cả đều liên quan đến sử dụng nền là ảnh. Nền ảnh thường tạo cho trang mức độ cá tính nào đó. Các trang thiên về mỹ thuật hoặc muốn tạo ấn tượng nên dùng thuộc tính này. Nếu trang web có lượng truy cập nhiều, dùng nền ảnh kích cỡ lớn cần phải cân nhắc.
Thuộc tính background-image
Nếu muốn sử dụng nền là ảnh bạn khai báo như sau:
body {background-image: url('mangluoitoancau.jpg');}Theo mặc định nếu ảnh nhỏ hơn nền thì nó sẽ lặp lại (
repeat) theo cả hai chiều cho đến khi lấp đầy nền thì thôi. Trong phần khai báo URL bạn có thể dùng địa chỉ ảnh từ trang của bạn hoặc bất kỳ địa chỉ ảnh nào trên mạng. Giờ tôi sẽ tiến hành tạo ảnh nền cho thẻ div, cái thứ nhất là ảnh to bằng với nền, cái thứ hai thì ảnh nhỏ hơn nền.
Ảnh to bằng nền
Ảnh nhỏ hơn nền nên nó được lặp lại để bao phủ hết nền
Thuộc tính background-repeat
Cái này chuyên dùng cho những ảnh nhỏ hơn nền, như ví dụ trên bạn đã thấy, khi ảnh nhỏ hơn nền thì theo mặc định nó sẽ lặp lại để lấp đầy khoảng không của background mới thôi, bạn có quyền chỉ định cách lập lại chỉ theo chiều nhất định nào đó.
- Nếu chỉ cho phép lặp lại theo chiều ngang thì viết: background-repeat: repeat-x;
- Nếu chỉ cho phép lặp lại theo chiều dọc thì viết: background-repeat: repeat-y;
- Nếu bạn không muốn ảnh nền lặp lại dù nó có nhỏ hơn nền thì viết: background-repeat: no-repeat;
Ví dụ:
Chỉ lặp lại theo chiều ngang
Chỉ lặp lại theo chiều dọc
Bạn có thể thấy một phần không gian của nền chưa được lấp đầy do ảnh nền chỉ được lặp theo 1 chiều. Lặp lại ảnh theo chiều nào đó rất hay dùng trong trường hợp bạn muốn tiết kiệm dung lượng tải về, đặc biệt là đối với các hoa văn họa tiết có tính lặp lại hoặc nền có kích thước không biết trước.
Thuộc tính background-attachment
Đây là thuộc tính giúp xác định vị trí tương đối của nội dung so với ảnh nền. Theo mặc định, giá trị này là
scroll, nghĩa là ảnh sẽ yên vị làm nền. Trường hợp bạn để
fixed thì ảnh nền sẽ di chuyển theo nội dung (
background-attachment:fixed;). Để dùng thuộc tính background-attachment bạn phải để
background-repeat: no-repeat;Nếu nội dung bài viết dài thì thường ảnh sẽ không đủ độ lớn bao trùm nền cả trang web, khi đó bạn nên dùng giá trị
fixed.Xem ví dụ bạn sẽ thấy dễ hiểu hơn, di chuyển thanh cuộn dọc để thấy sự khác biệt.
background-attachment theo mặc định
background-attachment có giá trị fixed
Thuộc tính background-position
Bạn sử dụng thuộc tính này để quy định vị trí của ảnh so với nền, đa số chỉ dùng trong trường hợp ảnh nhỏ hơn nền, về từ khóa có 8 giá trị cho bạn chọn lựa:
- left top: góc bên trái phía trên
- left center: bên trái chính giữa
- left bottom: góc bên trái phía dưới
- right top: góc bên phải phía trên
- right center: bên phải chính giữa
- right bottom: góc bên phải phía dưới
- center top: bên trên chính giữa
- center center: ngay tại trung tâm
- center bottom: bên dưới chính giữa
Ngoài ra là sử dụng giá trị cụ thể, nó giúp bạn điều chỉnh vị trí của ảnh nền tại bất cứ đâu mà bạn muốn, thí dụ:
div
{
background-image:url('bg.jpg');
background-repeat:no-repeat;
background-position:30px 50px;
}
Kết quả:
Thuộc tính background-size
Tôi rất ít khi dùng thuộc tính này, nhưng điều ấy không có nghĩa là chúng ta không bao giờ sử dụng, và sẽ thiếu sót nếu không đề cập đến nó. Trước CSS3, ảnh được làm nền lấy kích thước thực của nó ban đầu, giờ đây với background-size, bạn quyết định ảnh nền có giá trị cụ thể là bao nhiêu tùy ý, code mẫu:
div
{
background:url(bg.jpg);
background-size:160px 120px;
background-repeat:no-repeat;
}
Kết quả:
Ảnh gốc:
Thuộc tính background-clip
Đây cũng là thuộc tính mới trong CSS3, border-clip quy định mức độ phủ của nền màu (không áp dụng cho nền là ảnh), chúng ta có 3 giá trị:
- border-box: đây là giá gị mặc định, nghĩa là nền bao phủ đến tận đường viền, thông thường thì cũng như thế rồi, nên bạn chỉ thấy khác biệt ở những giá trị sau...
- padding-box: nghĩa là nền chỉ bao phủ đến padding mà không bao gồm đường viền.
- content-box: nghĩa là nền chỉ bao phủ phần nội dung, không gồm padding và viền.
OK, giờ là lúc đến các ví dụ minh họa cụ thể, nó sẽ giúp đỡ chúng ta hiểu rõ hơn:
#box{padding:20px;border:5px dotted #000000;background-color:red; background-clip:border-box;}
Kết quả:
Đây là border-box
Cũng đoạn code trên nhưng với border-clip là padding-box:
Đây là paddingbox
Và cuối cùng:
Đây là content-box
Bạn đã thấy khác biệt rất rõ nét giữa các box do các giá trị khác nhau của border-clip tạo ra.
Thuộc tính background-origin
Về cơ bản, background-origin rất giống background-clip, cũng có các giá trị như thế: border-box; padding-box; content-box. Tuy nhiên background-clip là áp dụng cho nền màu, còn background-origin là áp dụng cho nền ảnh, ngoài ra - điểm khác biệt nữa - giá trị mặc định của background-origin là padding-box chứ không phải border-box.. Các ví dụ.
Code mẫu:
#box {
background-image: url('images/bg.jpg');
background-repeat: no-repeat;
background-size: 80px 60px;
border: 5px dotted #000;
padding: 20px;
width: 400px;
background-origin: border-box;
}
Kết quả:
Bạn đã thấy ảnh làm nền ngay cả cho viền của hộp? Đây chính là giá trị border-box của background-origin.
padding-box:
Ảnh không làm nền cho viền nữa, đây là cách mà bạn hay thấy nhất, nó cũng là giá trị mặc định của background-origin, là padding-box.
content-box:
Cuối cùng, ảnh không nằm ở đường viền, cũng không nằm ở phần padding mà chỉ làm nền cho nội dung của box. Vâng, đây là giá trị cuối cùng của background-origin, là content-box.
Viết tắt khi dùng Background
Để các dòng code được ngắn hơn, thay vì viết rõ tất cả các thuộc tính và các giá trị trên từng dòng, chúng ta có thể khai báo thuộc tính duy nhất rồi khai báo đồng thời các giá trị khác đi kèm. Khai báo tắt cho tất cả các thuộc tính của background, bạn đơn giản sử dụng từ khóa background thôi. Code mẫu:
#box { background:red url('bg.jpg') no-repeat right top; } Vậy là thay vì phải viết background-color, background-image, background-repeat, background-position, bạn chỉ phải viết duy nhất một dòng.
