Bài 9: Cách sử dụng thuộc tính Backgrounds trong css

Cách sử dụng thuộc tính Backgrounds trong css

Thuộc tính background trong CSS cho phép bạn đặt nền cho một phần tử HTML. Bạn có thể sử dụng một số thuộc tính con của background để tùy chỉnh nền của phần tử đó. Dưới đây là một số thuộc tính con của background và cách sử dụng chúng:

1. background-color: Thuộc tính này được sử dụng để đặt màu nền cho phần tử HTML.

Ví dụ:

div {
  background-color: yellow;
}

Trong ví dụ trên, phần tử <div> sẽ có nền màu vàng.

2. background-image: Thuộc tính này cho phép bạn đặt hình ảnh làm nền cho phần tử HTML.

Ví dụ:

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

Trong ví dụ trên, phần tử <div> sẽ có hình ảnh image.jpg làm nền.

3. background-repeat: Thuộc tính này cho phép bạn chỉ định cách lặp lại hình ảnh nền, ví dụ như repeat, repeat-x, repeat-y hoặc no-repeat.

Ví dụ:

div {
  background-image: url("image.jpg");
  background-repeat: no-repeat;
}

Trong ví dụ trên, hình ảnh nền sẽ không được lặp lại.

4. background-position: Thuộc tính này cho phép bạn chỉ định vị trí của hình ảnh nền. Bạn có thể sử dụng một số giá trị như left, center, right, top, bottom hoặc các giá trị pixel.

Ví dụ:

div {
  background-image: url("image.jpg");
  background-position: center;
}

Trong ví dụ trên, hình ảnh nền sẽ được đặt ở giữa của phần tử <div>.

5. background-size: Thuộc tính này cho phép bạn chỉ định kích thước của hình ảnh nền. Bạn có thể sử dụng các giá trị như cover, contain hoặc các giá trị pixel.

Ví dụ:

div {
  background-image: url("image.jpg");
  background-size: cover;
}

Trong ví dụ trên, hình ảnh nền sẽ được căn chỉnh và phóng to để phù hợp với kích thước của phần tử <div>.

Bạn có thể kết hợp các thuộc tính trên để tạo ra nền tùy chỉnh cho phần tử HTML của mình.