Thuộc tính định dạng nền - Background

Thuộc tính background trong CSS được sử dụng để thêm nền (màu nền, hình ảnh, ....) cho phần tử của HTML.

Trong phần này, bạn sẽ được tìm hiểu các thuộc tính tạo nền background trong CSS như sau:

• background-color

• background-image

• background-repeat

• background-attachment

• background-position

• background(Công thức rút gọn)

Thuộc tính background-color

Thuộc tính background-color giúp bạn chỉ định màu nền cho một phần tử bất kì. Bạn có thể hoàn toàn sử dụng giá trị là tên màu, mã màu theo HEX, RGB

Cú pháp

element{
    background-color: value;
}

Ví dụ:

Thuộc tính Opacity/Transparency (Độ mờ đục/trong suốt)

Trong một số trường hợp, khi làm việc với màu nền, bạn có thể hoàn toàn mong muốn điều chỉnh gam màu của mình. Việc thiết lập độ mờ đục/độ trong suốt (opacity/transparency) sẽ là một công thức giúp bạn điều chỉnh điều đó.

Thuộc tính opacity chỉ định độ mờ đục/ trong suốt của một phần tử. Nó có thể nhận giá trị từ 0,0 - 1,0. Giá trị càng thấp, càng mờ đục và ngược lại.

Ví dụ về màu nền khi kết hợp thuộc tính opacity

Cú pháp

element{
    opacity: 0.2; // Giá trị từ 0.0 đến 1.0
}

Ngoài ra để không ảnh hưởng đến độ mờ của văn bản như ví dụ trên, bạn có thể sử dụng background-color với giá trị màu rgba(red,green,blue,alpha) với alpha có giá trị từ 0.0 (mờ nhất) đến 1.0 (rõ nhất)

Sử dụng background với giá trị màu rgba

Ví dụ

div{
    background-color: rgba(0, 128, 0, 0.3) // Màu xanh kết hợp với opacity 0.3
}

Ngoài ra, bạn có thể sử dụng hàm linear-gradient () hoặc rgb() để tạo màu

Thuộc tính background-image

Thuộc tính background-image giúp bạn thiết lập nền cho phần tử HTML bằng hình ảnh. Mặc định, hình ảnh sẽ được lặp lại để bao phủ hết toàn bộ diện tích của phần tử HTML.

Bạn nên chọn hình ảnh phù hợp để làm nền, tránh ảnh hưởng để mức độ hiển thị của văn bản hoặc các thành phần khác trên website.

Cú pháp

element{
    background-image: url('Đường dẫn ảnh')
}

Ví dụ

Thuộc tính background-repeat

Trong background-image thì ảnh nền sẽ được lặp theo cả chiều ngang và chiều dọc để phủ đầy diện tích của phần tử HTML.

Thuộc tính background-repeat cho phép lặp theo chiều chỉ định như chỉ lặp theo chiều ngang hoặc chiều dọc hay chỉ hiển thị ảnh 1 lần.

Thuộc tính background-repeat có các giá trị gồm:

• repeat-x: Chỉ cho phép lặp theo chiều ngang

• repeat-y: Chỉ cho phép lặp theo chiều dọc

• no-repeat: Chỉ xuất hiện duy nhất 1 lần

Cú pháp

element{
    background-repeat: value;
}

Ví dụ

Thuộc tính background-position

Thuộc tính background-position chỉ định vị trí hiện thỉ của hình nền

Cú pháp

element{
    background-position: value;
    // value có các giá trị chỉ vị trí: top right, left bottom,...
}

Ví dụ

Thuộc tính background-attachment

Thuộc tính background-attachment xác định tính cố định của ảnh nền so với nội dung trang khi được cuộn. Giá trị của thuộc tính được xác định gồm: scroll (ảnh nền sẽ cuộn cùng trang web - mặc định) và fixed (cố định ảnh nền so với nội dung trang web khi cuộn trang)

Cú pháp

element{
    background-attachment: value;
}

Ví dụ:

Viết gọn tất cả các thuộc tính background

Để rút ngắn code, chúng ta có thể chỉ định tất cả các thuộc tính background trên cùng một dòng duy nhất. Nó được gọi là thuộc tính Shorthand.

Thứ tự thuộc tính như sau:

• background-color

• background-image

• background-repeat

• background-attachment

• background-position

body {
    background: #ffffff url(“img_tree.png”) no-repeat right top;
}