Thuộc tính backgrounds

Thuộc tính backgrounds được dùng để làm màu nền, hình nền, hiệu ứng nền cho các phần tử HTML.

Các thuộc tính background cơ bản:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Background color

Thuộc tính background-color chỉ định màu nền cho phần tử HTML. Cú pháp sử dụng:

background-color: tên màu | mã màu ;

- Trong đó: Tên màu, mã màu trong CSS ta thường hay sử dụng :

• Tên màu - Tên màu theo chuẩn quốc tế : blue
• Mã màu HEX: #0000ff
• Mã màu RGB: rgb(0,0,255)

Xem thêm bài viết thuộc tính colors để biết cách sử dụng mã màu trong CSS.

h1{ background-color: blue; }

Chú ý: Giá trị transparent dùng để chỉ định màu nền trong suốt. Đây cũng là giá trị mặc định của background-color.

Background image

Thuộc tính background-image chỉ định một hình ảnh làm hình nền cho phần tử HTML. Cú pháp :

background-image: url('đường dẫn hình ảnh');

Chú ý: Mặc định, Hình ảnh sẽ lặp lại (repeat) cho đến khi bao phủ hết phần tử HTML.

h1{ background-image: url('bg_title.jpg'); }

Background repeat

Mặc định, Hình ảnh sẽ repeat theo cả chiều ngang, chiều dọc. Do đó, Thuộc tính background-repeat sinh ra để giải quyết trường hợp một hình nền có thể lặp lại hay không lặp, hoặc lặp theo chiều ngang, hoặc lặp theo chiều dọc.

Các giá trị cơ bản:

- background-repeat: repeat; Thuộc tính mặc định, lặp cả chiều ngang, dọc.

- background-repeat: no-repeat; Không lặp.

- background-repeat: repeat-x; Lặp theo chiều ngang cho đến khi bao hết phần tử HTML.

- background-repeat: repeat-y; Lặp theo chiều dọc cho đến khi bao hết phần tử HTML.

Background position

Thuộc tính background-position dùng để chỉ định vị trí của hình nền trong thẻ HTML. 

Các giá trị cơ bản:

- background-position: left center; Ngoài ra còn các giá trị khác như: left top,  left bottom, right top, right center, right bottom, center top, center center , center bottom. Nếu bạn chỉ viết 1 giá trị thì giá trị còn lại mặc định là "center".

- background-position: x% y%; Sử dụng tham số là %. x% là chỉ định theo chiều ngang, y% là chỉ định theo chiều dọc. Nếu chỉ viết 1 giá trị thì giá trị còn lại là 50%.

- background-position: x y; Sử dụng vị trí chính xác theo đơn vị cụ thể. Thường sử dụng là pixel. 

- background-position: initial; Thiết lập về giá trị mặc định. Hình ảnh nằm vị trí 0 0.

Background attachment

Thuộc tính background-attachment xác định hình nền có scroll theo trang web hay là không.

Các giá trị cơ bản:

- background-attachment: scroll; Hình nền sẽ scroll theo trang web. Đây là thuộc tính mặc định.

- background-attachment: fixed; Hình nền sẽ không scroll theo trang web.

- background-attachment: local; Hình nền sẽ scroll theo nội dung của phần tử chứa nó.

- background-attachment: initial; Thiết lập về giá trị mặc định.

Background - Cú pháp gom gọn thuộc tính

Thay vì viết nhiều thuộc tính dài dòng như ở trên. Thì thuộc tính background gom tất cả viết lại chỉ trong 1 dòng css. Cú pháp như sau:

background: background-color background-image background-repeat background-attachment background-position;

Xem ví dụ bên dưới :

background: #fff url("bg.jpg") no-repeat fixed center center;

Chú ý: Không có vấn đề gì khi ta không viết hết các thuộc tính. Miễn là viết đúng theo thứ tự.

Các thuộc tính background khác

Ngoài ra còn có 1 số thuộc tính background khác như bảng dưới đây :