Trong CSS, background là một nhóm các thuộc tính mạnh mẽ giúp bạn thiết lập màu sắc, hình ảnh nền, và cách thức hiển thị nền cho các phần tử HTML. Dưới đây là hướng dẫn chi tiết về 8 thuộc tính background phổ biến mà bạn có thể sử dụng để kiểm soát cách nền của một phần tử được hiển thị.

1. background-color

Thuộc tính này được sử dụng để đặt màu nền cho một phần tử HTML. Bạn có thể sử dụng bất kỳ màu sắc hợp lệ nào trong CSS, chẳng hạn như tên màu, mã hex, RGB hoặc HSL.

Cú pháp:

background-color: color;

Ví dụ:

div {

background-color: #f0f0f0; /* Màu xám nhạt */

}

2. background-image

Thuộc tính này dùng để đặt hình ảnh nền cho một phần tử. Bạn có thể chỉ định một URL đến hình ảnh hoặc thậm chí sử dụng các gradient CSS làm nền.

Cú pháp:

background-image: url('image.jpg');

Ví dụ:

div {

background-image: url('background.jpg'); /* Đặt hình ảnh làm nền */

}

3. background-repeat

Thuộc tính này xác định cách hình ảnh nền sẽ được lặp lại khi không đủ không gian để hiển thị hình ảnh. Bạn có thể đặt giá trị là repeat, no-repeat, repeat-x, hoặc repeat-y.

Cú pháp:

background-repeat: value;

Ví dụ:

div {

background-image: url('pattern.jpg');

background-repeat: repeat; /* Lặp lại cả chiều ngang và dọc */

}

Các giá trị của background-repeat:

repeat: Lặp lại hình ảnh cả chiều ngang và dọc.

no-repeat: Không lặp lại hình ảnh nền.

repeat-x: Lặp lại hình ảnh chỉ theo chiều ngang.

repeat-y: Lặp lại hình ảnh chỉ theo chiều dọc.

4. background-position

Thuộc tính này xác định vị trí của hình ảnh nền trong phần tử. Bạn có thể sử dụng các giá trị như top, right, bottom, left hoặc các đơn vị đo lường cụ thể.

Cú pháp:

background-position: value;

Ví dụ:

div {

background-image: url('background.jpg');

background-position: center center; /* Đặt hình ảnh tại vị trí chính giữa */

}

Các giá trị phổ biến của background-position:

top left, top center, top right

center left, center center, center right

bottom left, bottom center, bottom right

5. background-size

Thuộc tính này xác định kích thước của hình ảnh nền. Bạn có thể sử dụng các giá trị như auto, cover, contain, hoặc các kích thước cụ thể.

Cú pháp:

background-size: value;

Ví dụ:

div {

background-image: url('background.jpg');

background-size: cover; /* Làm cho hình ảnh nền phủ đầy phần tử */

}

Các giá trị phổ biến của background-size:

cover: Hình ảnh sẽ tự động được phóng đại hoặc thu nhỏ để phủ đầy phần tử mà không bị méo.

contain: Hình ảnh sẽ được thu nhỏ hoặc phóng to sao cho nó hoàn toàn vừa vặn trong phần tử mà không bị cắt bớt.

6. background-attachment

Thuộc tính này xác định cách hình ảnh nền sẽ di chuyển khi cuộn trang. Bạn có thể chọn scroll, fixed, hoặc local.

Cú pháp:

background-attachment: value;

Ví dụ:

div {

background-image: url('background.jpg');

background-attachment: fixed; /* Hình ảnh nền cố định khi cuộn */

}

Các giá trị của background-attachment:

scroll: Hình ảnh nền sẽ di chuyển khi người dùng cuộn trang.

fixed: Hình ảnh nền sẽ cố định, không di chuyển khi cuộn trang.

local: Hình ảnh nền sẽ di chuyển cùng với nội dung bên trong phần tử khi cuộn.

7. background-clip

Thuộc tính này xác định vùng vẽ của hình ảnh nền, tức là nơi mà nền được vẽ trong phần tử. Các giá trị bao gồm border-box, padding-box, và content-box.

Cú pháp:

background-clip: value;

Ví dụ:

div {

background-image: url('background.jpg');

background-clip: content-box; /* Hình ảnh nền chỉ được vẽ trong vùng nội dung */

}

8. background-origin

Thuộc tính này xác định vị trí bắt đầu của hình ảnh nền trong phần tử. Bạn có thể chọn giữa border-box, padding-box, và content-box.

Cú pháp:

background-origin: value;

Ví dụ:

div {

background-image: url('background.jpg');

background-origin: padding-box; /* Hình ảnh nền bắt đầu từ khu vực padding */

}

Tóm tắt các thuộc tính background

Dưới đây là tổng hợp các thuộc tính background trong CSS mà bạn có thể sử dụng:

background-color: #fff;

background-image: url('background.jpg');

background-repeat: no-repeat;

background-position: center center;

background-size: cover;

background-attachment: fixed;

background-clip: content-box;

background-origin: padding-box;

Kết luận

Các thuộc tính background trong CSS giúp bạn có toàn quyền kiểm soát màu sắc, hình ảnh nền và cách chúng hiển thị, tạo ra các thiết kế trang web đẹp mắt và linh hoạt. Việc kết hợp đúng các thuộc tính sẽ giúp bạn tùy chỉnh giao diện nền của các phần tử HTML một cách hoàn hảo và dễ dàng.