Khi bạn vào bất kỳ một trang web nào đó, bạn sẽ thấy màu của các trang web có thể sẽ khác nhau và bạn có bao giờ nghĩ sao họ lại làm được như thế không? Sau khi đọc xong bài này thì các bạn cũng làm được như họ.

1, Thuộc tính Background trong CSS.

-Thuộc tính background trong CSS cho phép chúng ta thiết lập màu sắc hay là ảnh cho nền của một hoặc nhiều thẻ HTML.

-Thuộc tính này có phần mở rộng gồm các thuộc tính sau:

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

2, Các Thuộc tính.

-Sau khi đã được giới thiệu qua về các thuộc tính trên thì giờ chúng ta cùng đi tìm hiểu chi tiết về từng thuộc tính.

Thuộc tính background-color

-Thuộc tính này dùng để xác định màu nền cho thẻ HTML.

Cú Pháp:

selectors{
    background-color: value;
}

Trong đó:

• selectors là đối tượng cần css(xem thêm)
• value là giá trị màu của thuộc tính, có 4 kiểu màu được điền vào như sau:
  • Màu tên tiếng anh: red,green,blue,yellow,..
  • Mã màu hex: #fff,#000,... (xem thêm).
  • Mã màu rgb.
  • Mã màu rgba.

VD: Màu tên tiếng anh.

p{
    background-color: red;
}

Xem Kết Quả

VD: Màu mã hex.

p{
    background-color: #FF0000;
}

Xem Kết Quả

VD: Mã màu rgb.

p{
    background-color: rgb(255,0,0);
}

Xem Kết Quả

VD: Mã màu rgba. Đây là dạng mở rộng của rgb với thông số cuối cùng là opacity của màu sắc đó. Đậm dần từ 0->1.

p{
    background-color: rgb(255,0,0,0.4);
}

Xem Kết Quả

Thuộc tính background-image

-Thuộc tính này dùng để xác định hình nền cho Thẻ HTML.

Cú Pháp:

selector{
    background-image: url(path);
}

Trong đó:

• selector là đối tượng cần css.
• path là địa chỉ hình ảnh (Có thể là địa chỉ tương đối, tuyệt đối).

VD: CSS ảnh nền cho thẻ body.

body{
    background-image: url(https://toidicode.com/upload/images/logo-toidicode.png);
}

Xem Kết Quả

Thuộc tính background-repeat

-Thuộc tính này xác định hình ảnh được lặp như thế nào (Chú ý: nó chỉ hỗ trợ nếu background của bạn là ảnh).

Cú Pháp:

selector{
    background-repeat: value;
}

Trong đó:

• selector là đối tượng cần css.
• value là một trong các giá trị sau:
  • repeat-x: Chỉ lặp lại hình ảnh theo chiều ngang.
  • repeat-y: Chỉ lặp lại hình ảnh theo chiều dọc.
  • repeat: Lặp lại hình ảnh theo cả hai chiều.
  • no-repeat: Không lặp hình ảnh.

VD: Lặp hình ảnh theo chiều ngang.

body{
    background-image: url(https://toidicode.com/upload/images/logo-toidicode.png);
    background-repeat: repeat-x;
}

Xem Kết Quả

VD: Lặp hình ảnh theo chiều dọc.

body{
    background-image: url(https://toidicode.com/upload/images/logo-toidicode.png);
    background-repeat: repeat-y;
}

Xem Kết Quả

VD: Lặp hình ảnh theo cả 2 chiều ngang và dọc.

body{
    background-image: url(https://toidicode.com/upload/images/logo-toidicode.png);
    background-repeat: repeat;
}

Xem Kết Quả

VD: Không lặp hình ảnh.

body{
    background-image: url(https://toidicode.com/upload/images/logo-toidicode.png);
    background-repeat: no-repeat;
}

Xem Kết Quả

Thuộc tính background-position

-Thuộc tính này xác định vị trí hình ảnh nền cho đối tượng.

Cú Pháp:

seletor{
    background-position: value;
}

Trong đó:

• selector là đối tượng cần css.
• value là một trong các giá trị sau:
  • left, right, top, bottom.
  • px. giá trị này có tham số cách trái phải (vd: 50px 70px - là các trái 50px, cách trên 70px).
  • %. tương tự như px nhưng đơn vị là %.

VD:

body{
    background-image: url(https://toidicode.com/upload/images/logo-toidicode.png);
    background-repeat: no-repeat;
    background-position: top right;
}

Xem Kết Quả

VD: position đơn vị pixel. Cách trái 50px.

body{
    background-image: url(https://toidicode.com/upload/images/logo-toidicode.png);
    background-repeat: no-repeat;
    background-position: 50px;
}

Xem Kết Quả

VD: position đơn vị %. Cách trái 20%.

body{
    background-image: url(https://toidicode.com/upload/images/logo-toidicode.png);
    background-repeat: no-repeat;
    background-position: 20%;
}

Xem Kết Quả

Thuộc tính background-attachment

-Thuộc tính này quy định xem hình nền hiển thị như thế nào khi scroll.

Cú Pháp:

seletor{
    background-attachment: value;
}

Trong đó:

• selector là đối tượng cần css.
• value là một trong hai giá trị sau:
  • fixed: Cố định khi scroll trang web.
  • scroll: Di chuyển theo khi scroll (đây là thuộc tính mặc định).

VD: attachment fixed.

body{
        background-image: url(https://toidicode.com/upload/images/logo-toidicode.png);
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

Xem Kết Quả

VD: attachment scroll.

body{
        background-image: url(https://toidicode.com/upload/images/logo-toidicode.png);
        background-repeat: no-repeat;
        background-attachment: scroll;
    }

Xem Kết Quả

Thuộc tính background

-Đây là thuộc tính tổng hợp lại tất cả các thuộc tính con ở trên với các thông số như sau:

Cú Pháp:

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

VD:

body{
        background: green url(https://toidicode.com/upload/images/logo-toidicode.png) no-repeat top left fixed;
    }

Xem Kết Quả

3, Lời kết.

-Qua phần này mình đã trình bày xong với mọi người về thuộc tính background thiết lập nền cho thẻ HTML rồi, mình hy vọng qua phần này mọi người có thể hiểu hơn về thuộc tính background trong CSS.

Chúc các bạn học tốt!