Phông Nền

Các thuộc tính về phông nền trong CSS được sử dụng để thiết lập hiệu ứng phông nền cho phần tử HTML trên trang web.

Các thuộc tính dùng để thiết lập phông nền trong CSS gồm có:

• Thuộc tính background-color: Thiết lập màu nền.
• Thuộc tính background-image: Thiết lập ảnh nền.
• Thuộc tính background-repeat: Thiết lập kiểu hiển thị lặp lại cho ảnh nền.
• Thuộc tính background-position: Thiết lập vị trí hiển thị của ảnh nền.
• Thuộc tính background-attachment: Thiết lập kiểu attache của ảnh nền khi hiển thị.
• Thuộc tính background: Thiết lập phông nền (màu nền hoặc ảnh nền, cách hiển thị lặp lại, vị trí hiển thị) tuỳ vào cú pháp sử dụng.

Thuộc Tính background-color

Thuộc tính background-color được sử dụng để thiết lập màu nền cho phần tử HTML.

Đoạn mã CSS dưới đây sử dụng thuộc tính background-color để thiết lập màu nền cho phần tử body trên trang:

  body {    background-color: orange;  }

Giá trị của thuộc tính này có thể là một màu theo tên hoặc giá trị màu theo RGB hoặc HEX... như tìm hiểu ở bài học về màu trong CSS.

Thuộc Tính background-image

Thuộc tính background-image trong CSS được sử dụng để thiết lập ảnh nền cho phần tử HTML trên trang.

Đoạn mã CSS dưới đây sử dụng thuộc tính background-image để thiết lập màu nền cho phần tử body trên trang:

  body {    background-image: url("https://i.imgur.com/wzPwquG.jpg");  }

Giá trị của thuộc tính này là một địa chỉ URL tham chiếu tới hình ảnh và được đặt bên trong url("..."). Địa chỉ URL sử dụng có thể là tuyệt đối như ở ví dụ trên hoặc tương đối.

Thuộc Tính background-repeat

Thuộc tính background-repeat được sử dụng để thiết lập kiểu lặp lại cho ảnh nền của phần tử. Thuộc tính này chỉ nên được áp dụng khi phần tử được thiết lập ảnh nền.

Đoạn code CSS dưới đây sử dụng thuộc tính background-repeat để lặp lại ảnh nền thiết lập cho phần tử body theo cả chiều ngang lẫn chiều dọc:

  body {    background-image: url("https://i.imgur.com/yWcv2rH.gif");    background-repeat: repeat;  }

Để hiển thị lặp lại ảnh nền theo chiều ngang sử dụng giá trị repeat-x cho thuộc tính này:

  body {    background-image: url("https://i.imgur.com/yWcv2rH.gif");    background-repeat: repeat-x;  }

Để hiển thị lặp lại ảnh nền theo chiều dọc sử dụng giá trị repeat-y cho thuộc tính này:

  body {    background-image: url("https://i.imgur.com/yWcv2rH.gif");    background-repeat: repeat-y;  }

Với giá trị là no-repeat ảnh nền sẽ không được lặp lại, đây cũng là kiểu lặp mặc định của ảnh nền:

  body {    background-image: url("https://i.imgur.com/yWcv2rH.gif");    background-repeat: no-repeat;  }

Thuộc Tính background-position

Thuộc tính background-position được sử dụng để thiết lập vị trí của ảnh nền:

  body {    background-image: url("https://i.imgur.com/ElCH8XF.png");    background-repeat: no-repeat;    background-position: left bottom;  }

Thuộc Tính background-attachment

Thuộc tính background-attachment được sử dụng để thiết lập kiểu trói buộc (attach) khi hiển thị của ảnh nền.

Đoạn code trong ví dụ dưới đây sẽ attach ảnh nền cố định trên trang:

  body {    background-image: url("https://i.imgur.com/ElCH8XF.png");    background-repeat: no-repeat;    background-position: right top;    background-attachment: fixed;  }

Thuộc Tính background

Thuộc tính background được sử dụng để thiết lập phông nền cho phần tử HTML bao gồm màu nền hoặc ảnh nền, vị trí ảnh nền, kiểu hiển thị lặp lại... tuỳ thuộc vào cú pháp sử dụng. Nó có thể thay thế cho tất cẩ các thuộc tính background-... đề cập ở trên.

Đoạn mã CSS dưới đây sử dụng thuộc tính background để thiết lập màu nền cho phần tử body trên trang:

  body {    background: orange;  }

Đoạn mã CSS dưới đây sử dụng thuộc tính background để thiết lập ảnh nền cho phần tử body trên trang:

  body {    background: url("https://i.imgur.com/wzPwquG.jpg");  }

Đoạn mã CSS dưới đây sử dụng thuộc tính background để thiết lập ảnh nền, kiểu hiển thị lặp lại và vị trí của phông nền cho phần tử body trên trang:

  body {    background: url("https://i.imgur.com/wzPwquG.jpg") no-repeat left bottom;  }