Tạo background cho website

Bước đầu tiên khi thiet ke web là chúng ta phải tạo background cho website (phần background lớn nhất của website). Ở đây có rất nhiều dạng background khác nhau. Ví dụ: background website là 1 màu duy nhất, đây là trường hợp dễ nhất:

body { background-color: Gray;}

Live Demo | Download Source Code

Website có background là màu gradient

Khi background của website có màu là gradient thì chúng ta sẽ dùng photoshop để các 1 mẫu background có bề ngang 1px - 5px, chiều dài bằng với màu gradient và cho nó lặp theo chiều ngang. Bạn hãy xem qua website fxcard và nghĩ xem chúng ta sẽ cắt hình như thế nào

Code CSS

body {background-image: url(../images/bg.jpg); background-repeat:repeat-x; background-color: #eeeeee;}

Thứ 1: chúng ta set cho thuộc tính background-image là hình mà chúng ta vừa cắt.
Thứ 2: Set thuộc tính background-repeat:repeat-x: đây là thuộc tính quan trọng nhất trong việc tạo gradient background, thuộc tính này sẽ lặp hình background theo chiều ngang.
Thứ 2: Set thuộc tính background-color: #eeeeee. Đây là màu rất quan trọng, chúng ta cần phải lấy màu chính xác màu gradient background cuối cùng trước khi kết thúc là màu gì bằng cách dùng công cụ Eye Dropper trong Photoshop.

Website voi gradient background

Live Demo | Download Source Code

Ví dụ 2

body{ background-image: url('../images/background.gif'); background-repeat: repeat;}

Kết Quả

Website voi repeated background

Live Demo | Download Source Code

body{ background-image: url('../images/background.gif'); background-repeat: repeat;}