Thuộc tính Background trong CSS

Thuộc tính Background trong CSS dùng để xác định các hiệu ứng cho hình nền của một đối tượng trong HTML.
1. Thuộc tính background-color
Thuộc tính background-color xác định màu nền của một thành phần. Giá trị của nó là tên màu hoặc mã màu.
Ví dụ: Đặt màu nền là màu xanh (blue) cho phần body trong văn bản HTML.

body{background-color: blue;}

hoặc

body{background-color: #0000FF;}

2. Thuộc tính background-image
Thuộc tính background-image xác định hình nền cho một thành phần. Giá trị của nó là đường dẫn ảnh.
Ví dụ: Đặt hình nền cho phần body trong văn bản HTML. Hình này nằm ngang hàng với file HTML và có tên là bg.jpg

body{background-image: url("bg.jpg");}

3. Thuộc tính background-repeat
Thuộc tính background-repeat cho phép người dùng lặp ảnh nền theo chiều ngang, chiều dọc hay cả hai chiều (mặc định).
Các giá trị của thuộc tính background-repeat:

• repeat-x : Lặp ảnh theo chiều ngang.
• repeat-y : Lặp ảnh theo chiều dọc.
• repeat : Lặp ảnh theo cả 2 chiều.
• no-repeat : Không lặp lại.

Ví dụ: Lặp hình nền bg.jpg của thành phần body theo chiều dọc

body{background-image: url("bg.jpg");background-repeat: repeat-y;}

 4. Thuộc tính background-attachment
Thuộc tính background-attachment dùng để xác định hình nền được cố định hay bị trượt theo thanh cuộn
Các giá trị của thuộc tính background-attachment:

• fixed : Cố định ảnh nền.
• scroll : Ảnh nền trượt theo thanh cuộn.

5. Thuộc tính background-position
Thuộc tính background-position dùng để xác định vị trí của hình nền trong khi lập trình web. Mặc định hình nền khi được chèn vào là năm ở trên cùng bên trái. Tuy nhiên chúng ta có thể điều chỉnh được vị trí này tùy theo mục đích.
Cú pháp:

background-position: giá_trị_1 giá_trị_2;

Trong đó:

• giá_trị_1: là giá trị xác định vị trí theo chiều ngang (Tính từ trái sang phải).
• Giá trị 1 này có thể sử dụng các đơn vị chính xác (inch, cm, px …) hay các đơn vị tương đối (%, left, center, right)
• giá_trị_2: là giá trị xác định vị trí theo chiều dọc (Tính từ trên xuống dưới).
• Giá trị 2 này có thể sử dụng các đơn vị chính xác (inch, cm, px …) hay các đơn vị tương đối (%, top, center, bottom)

 Nguồn: the gioi web

SHARE THIS