Hướng dẫn sử dụng 1 hình ảnh làm background cho toàn trang web

[Admin]

Ý tưởng:


Nếu bạn làm việc với CSS chúng ta sẽ cần nhiều hình ảnh để làm background cho website cũng như một vài thành phần nào đó. Thông thường chúng ta sử dụng nhiều hình ảnh riêng biệt và set thuộc tính background cho thành phần nhất định nào đó. Ví dụ:

th { background: #5E758E url(images/thead.gif) top left repeat-x;
}

Có lẽ cách viết này mới nhìn chúng ta sẽ cảm thấy thoải mái vì nó khá thoáng và dễ nhìn. Tuy nhiên, một website thường có nhiều hình ảnh làm background, do đó số lượng hình ảnh sẽ khá nhiều. Vấn đề ở đây là số lượng hình càng nhiều thì request tới server càng tăng do nhu cầu tải hình để hiển thị trên web của máy client. Đây là một trong những nguyên nhân làm tăng thời gian load website của bạn lên đáng kể.


Giải quyết vấn đề:


Có một kĩ thuật trong CSS mà mình nghĩ là nhiều anh em biết nhưng ít tận dụng. Đó là sử dụng 1 hình ảnh duy nhất để chứa nhiều hình ảnh phụ rồi dùng hình ảnh duy nhất này để làm background cho tất cả các phần tử. Kĩ thuật này dĩ nhiên là giải quyết được bài toán giảm số lượng request đã nói ở trên (không giải quyết được thì nói làm gì :lick: ) mà còn giúp tăng tốc độ tải trang lên nhiều.


Giả sử mình có 1 file background


File này mình dùng tạo các Icon cho một hệ thống menu chẳng hạn :wink:


Để sử dụng cho một phần tử nào đó của menu mình viết CSS như sau:

li.linkanalyzer-checker{ background: url(images/icon_tools.png) 0px -25px no-repeat;
}

Trong đó
0 là vị trí trục tọa độ X trên hình
-25px là vị trí trục tọa độ Y trên hình




Với những số liệu tọa độ này mình có thể lấy chính xác hình ảnh đầu tiên để làm backgroup cho phần tử đầu tiên của menu. Tiếp tục viết các tọa độ riêng cho từng đối tượng của menu và thay đổi tọa độ mình sẽ có một menu hoàn chỉnh chỉ sử dụng 1 hình ảnh mà thôi :wink:


Demo bạn có thể xem ở danh sách các Tools dành cho webmaster ở bên dưới bài viết này.


P/S: Mình thấy hiện nay việc sử dụng kĩ thuật viết này còn hạn nhưng nếu anh em sử dụng nó rất có lợi về sau. Hiện một số site lớn mình thấy sử dụng cách viết này làm menu và các thành phần trang như Zing, Vietnamwork và ... VNWebmaster.COM :khakha:


Chúc các bạn thành công