Cơ bản về background trong CCS

Cơ bản về background trong CCS
Bài viết sưu tầm trên VWG nhằm lưu trữ để học hỏi

Trước khi chưa có sự ra đời của CSS, chúng ta chỉ có thể tạo được màu nền cho toàn trang hoặc cho một table nào đấy thôi. Công nghệ web phát triển cho phép ta có thể tạo màu nền bất cứ thành phần nào trên trang. Thuộc tính này trong CSS có cấu trúc giống nhau cho mọi tag là: background-color.

Ví dụ:

- cho một lớp:

.lop { background-color:blue; }

- lớp nằm trong một tag, ví dụ

div.lop { background-color:blue; }
- Một tag nào đấy, ví dụ

P { background-color:blue; }

Bạn có thể định nghĩa màu theo mã HEXA hoặc RGB.

Hình nền:

Với CSS, bạn cũng có thể tạo một hình nền cho bất cứ thành phần nào trên trang. Ví dụ:

td.tieude {background-image: url(http://host.com/images/tile.gif); }
.myclass {background-image: url(http://host.com/images/xyz.gif);

Nếu như trong cùng một lớp hoặc tag bạn định nghĩa đồng thời cả hình nền và màu nền thì theo thứ tự hình nền sẽ hiển thị trước và sau đó sẽ tới màu nền. Màu nền sẽ có tác dụng khi user tắt chế độ xem ảnh khi duyệt web.Ví dụ:

.myclass {background-color:#FF0000; }
.myclass {background-image: url(http://host.com/images/xyz.gif);


Điều chỉnh hình nền:

Với một hình nền bất kì, bạn có thể cho phép ảnh đó lặp lại hay không, định vị trí, khóa hình nền,... Sau đây là một vài ví dụ:

- Hình nền không lặp lại (chỉ hiện 1 lần ở top left):

p { background-image: url(../images/bg.gif);
background-repeat: no-repeat; }

- Lặp lại theo chiều ngang:

p {background-image: url(../images/bg.gif);
background-repeat: repeat-x; }

- Lặp lại theo chiều dọc:

p {background-image: url(../images/bg.gif);
background-repeat: repeat-y; }

- Hình nền bị khóa, sẽ không trượt theo khi bạn scroll:

body {background-image: url(../images/bg.gif);
background-attachment: fixed; }

- Định vị trí cho hình nền. Ví dụ ở đây là góc bên phải phía dưới:

p {background-image: url(../img/bga.gif);
background-position: right bottom; }

- Định tọa độ đặc biệt cho hình nền, tính từ góc trên trái (top left):

p {background-position: 20px 15px; }

Câu lệnh rút gọn:

Bạn có thể kết hợp những thứ linh tinh ở trên thành 1 câu lệnh duy nhất. Việc làm này giúp ta tiết kiệm thời gian hơn và code cũng sẽ đẹp hơn. Ví dụ:

body {background: #cc33ff url(images/background.gif) repeat-x top right; }

Các thành phần trên cũng không nhất thiết phải theo thứ tự như vậy, hoàn toàn có thể thay đổi được:

body {background: url(images/background.gif)#cc33ff repeat-x top right; }