Thuộc tính background là tổng hợp của tất cả các thuộc tính con. Khi viết CSS, bạn có thể thực hiện riêng rẽ các thuộc tính con

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

Background Color

Thuộc tính Background Color dùng để xác định màu nền cho thẻ HTML. Background Color được dùng với cấu trúc như sau body { background-color: red; } Xem demo. Trong CSS, để xác định màu sắc, chúng ta thường sử dụng 1 trong các giá trị sau:

• Mã màu. Ví dụ: #ff0000,…
• Tên màu sắc. Ví dụ: red, black…
• Hệ màu RGB. Ví dụ như: rgb(255,0,0)

Mã màu và hệ màu RGB bạn dùng photoshop để lấy. Còn tên màu thì nó là từ tiếng Anh của màu sắc. Ví dụ sau sẽ thiết lập màu nền cho các thẻ h1, h2, h3 h1 { background-color: green; } h2 { background-color: blue; } h3 { background-color: pink; } Xem demo.

Background Image

Background Image dùng để đặt ảnh nền cho thẻ html Ví dụ: body { background-image: url("anh.jpg"); } Xem demo. Khi dùng ảnh làm nền thì cần chú ý các thuộc tính như sau:

background-repeat:

Thiết lập sự lặp đi lặp lại của ảnh để phủ hết thẻ HTML. background-repeat có giá trị như sau: repeat và no-reepeat, repeat-x, repeat-y repeat: ảnh sẽ lặp đi lặp lại đến khi nào phủ hết thẻ HTML. Măc định, khi thiết lâp background-image ảnh repeat No-repeat: ảnh không lặp đi lặp lại. repeat-x: chỉ lặp lại theo chiều ngang repeat-y: chỉ lặp lại theo chiều dọc Ví dụ: p { background-image: url("anh.jpg"); background-repeat: no-repeat; } Xem demo.

background-attachment

. Dùng thuôc tính này để cố định ảnh khi nội dung HTML quá dài và kéo xuống dưới. Thuộc tính background-attachment thường chỉ dùng 1 giá trị là Fixed. Ví dụ: body { background-image: url("anh.jpg"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; } Xem demo.

Backgroud-position

. Dùng để thiết lập vị trí cho ảnh đặt làm background. Giá trị mặc định sẽ là top left. Bạn có thể thể dùng các giá trị như sau: top, left, right, center, bottom. Trong 1 số trường hợp bạn có thể px. Nó là 1 con số cụ thể nào đó. Ví dụ: body { background-image: url("canh.jpg"); background-repeat: no-repeat; background-position: right top; } Top right : nghĩa là ảnh nằm trên cùng phía bên phải Xem demo. hoặc body { background-image: url("canh.jpg"); background-repeat: no-repeat; background-position: 10px 5px; } background-position: 10px 5px nghĩa là: ảnh cách lề trên 10px, cách lề trái 5px Xem demo. Khi đã quen cách dùng background rồi. Bạn có thể dùng tổng hợp lại để viết CSS cho nhanh. Ví dụ: body { background: #ffffff url("canh.jpg") no-repeat right top; } Xem demo. Nhớ thứ tự khi thiết lập giá trị các thuộc tính:

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

Nếu bạn không thiết lập thuộc tính nào đó, nó sẽ nhận giá trị mặc định.

Một vài chú ý:

Khi sử dụng các thuộc tính của CSS thì bạn phải dùng dấu gạch ngang chứ không phải dấu gạch dưới. background-position chứ không phải background_position Các đơn vị đi kèm phải viết sát, không có dấu cách. Ví dụ: Sử dụng sai: background-position: 10 px 5px; Đúng là: background-position: 10px 5px; Đường dẫn ảnh ở các ví dụ mình đặt là: url("canh.jpg"). Nếu các bạn tải về máy chạy thử thì phải để đầy đủ là url("https://tech12h.com/canh.jpg") thì mới chạy đúng. Nếu viết mỗi mình background thì CSS hiểu là background-color. Ví dụ: body { background: red; } Cách để học nhanh thuộc tính background: Bạn chỉ cần nhớ background là thuộc tính đặt nền cho thẻ HTML. Nền thì chỉ có màu sắc hoặc ảnh nền. Bạn cứ viết thuộc tính đơn giản đầu tiên. Sau đó, muốn căn chỉnh gì thì mình thêm vào sử sau: đặt màu nền(background), đặt ảnh nền(background-image). Và chỉ cần viết background. Các giá trị đằng sau chỉ cần đúng cấu trúc là CSS nó nhận biết hết Muốn đặt màu nền: body { background: green; } Muốn đặt hình nền thì bạn lại dùng: body { background: url("canh.jpg"); } Xem demo. Kết luận: Thuộc tính background được dùng khá thường xuyên trong CSS. Do vậy, khi học HTML thì bạn cần phải nắm được các dùng thuộc tính này.