Bài 1 – Thuộc tính CSS Background

CSS Background là thuộc tính để định dạng màu nền và hình nền cho một đối tượng, các thuộc tính bao gồm:

• Background-color
• Background-image
• Background-repeat
• Background-attachment
• Background-position

Ví dụ minh họa với từng thuộc tính:

1.1. Background-color

Màu nền cho phần tử toàn trang là thẻ, hãy xem ví dụ 4 trường hợp giá trị thuộc tính khác nhau nhưng cùng 1 kết quả:

body{background-color: #000000;} /* Có giá trị là Hex có 6 số */body{background-color: #000;} /* Tối ưu CSS màu nền còn 3 số, trường hợp này chỉ áp dụng với 6 số giống nhau ví dụ 111,222,333,... */body{background-color: black;} /*Có giá trị là tên màu black */body{background-color: rgb(0,0,0);} /*Có giá trị RGB */

(Bạn nên chạy thử trên website soạn thảo css online để hiểu rõ ý nghĩa của câu lệnh)

1.2. Background-image

Màu nền cho menu là 1 ảnh, xem ví dụ minh họa:

/* 1. Hình nền là 1 file Logo được lặp cả chiều ngang và dọc*//* & file ảnh cùng thư mục với file tài liệu */body {background-image: url("logo1.png");}/* 2. Tệp logo có đường dẫn tuyệt đối */body {background-image: url("https://hoangluyen.com/wp-content/uploads/2015/01/logo1.png");}/* Copy 1 trong 2 đọa mã trên để test thử */

1.3. Background-repeat

Màu nền được lặp ngang dọc theo ý muốn, các giá trị như sau:
repeat-x: Lặp ngang
repeat-y: Lặp dọc
repeat: Lặp cả ngang cả dọc
no-repeat: Không lặp chỉ hiện thị 1 ảnh

body { background-image: url("https://hoangluyen.com/wp-content/uploads/2015/01/logo1.png"); background-repeat: repeat-x;}

 1.4. Background-attachment

Đây là thuộc tính nâng cao của Background CSS, có cú pháp như sau

background-attachment: scroll|fixed|local|initial|inherit;

(Bạn nên chạy thử trên website soạn thảo css online để hiểu rõ ý nghĩa của câu lệnh)

———————————————————————————————————–

Tác giả: Hoàng Luyến
https://hoangluyen.com/