> For the complete documentation index, see [llms.txt](https://hifunnel.gitbook.io/hifunnel-help-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hifunnel.gitbook.io/hifunnel-help-center/documentation/documentation-vi/website-and-landing-page/page/how-to-customize-your-section-background-settings.md).

# Tùy chỉnh Cài đặt Hình nền (Background) cho Section

Hướng dẫn tùy chỉnh nền cho Section trên Hifunnel bao gồm màu nền, hình nền, video nền, dải màu gradient, hiệu ứng cuộn parallax và lớp phủ overlay.

Cài đặt Hình nền (Background) cho phép bạn nâng cao tính chuyên nghiệp và nhận diện thương hiệu cho trang bằng cách thêm màu nền, ảnh nền, video loop, hiệu ứng chuyển màu gradient hoặc lớp phủ overlay cho bất kỳ Section (Khối) nào.

***

## Các loại Nền & Tính năng chính

### 1. Màu đơn sắc (Solid Color) & Dải màu Gradient

Lựa chọn màu đơn sắc từ bảng màu thương hiệu của bạn hoặc áp dụng hiệu ứng chuyển màu gradient mượt mà giữa hai tone màu để tạo chiều sâu thị giác hiện đại.

### 2. Hình nền (Background Image)

Tải lên các hình ảnh nghệ thuật, hoa văn, hoặc ảnh chụp thực tế:

* **Vị trí ảnh (Image Position)**: Căn trên (Top), Căn giữa (Center), Căn dưới (Bottom).
* **Hình nền cố định (Hiệu ứng Parallax / Fixed Background)**: Khi bật tính năng này, ảnh nền sẽ đứng yên cố định trong khi các khối văn bản/nút bấm cuộn mượt qua trên ảnh trên màn hình máy tính.
* **Kích thước hình nền**: Cover (Phủ kín khối), Contain (Hiển thị trọn vẹn ảnh), hoặc Auto.

### 3. Video nền (Background Video)

Tải lên file video ngắn (dạng MP4) hoặc dán link YouTube/Vimeo để tạo các Banner Hero động vô cùng thu hút ánh nhìn của khách hàng ngay khi truy cập trang.

### 4. Lớp phủ nền (Background Overlay)

Tạo một lớp màu mờ (tối hoặc sáng) phủ lên trên ảnh/video nền để tăng độ tương phản, giúp các đoạn văn bản và nút CTA bên trên hiển thị rõ ràng, dễ đọc.

{% hint style="warning" %}
**Khắc phục lỗi: Tại sao Ảnh/Video nền của tôi không hiển thị?** Nếu bạn đã tải ảnh hoặc video lên nhưng màn hình Section chỉ hiển thị một màu đen hoặc trắng toàn bộ, hãy kiểm tra thanh trượt **Độ mờ lớp phủ (Overlay Opacity)**. Nếu độ mờ đang ở mức 100% màu đặc, hãy kéo giảm thanh độ mờ xuống (ví dụ 20%-50% hoặc 0% trong suốt) để làm hiện ra lớp ảnh/video bên dưới!
{% endhint %}

***

## Hướng dẫn các bước Tùy chỉnh Nền cho Section

{% stepper %}
{% step %}

#### Bước 1: Mở Cài đặt Section

Trong giao diện thiết kế, di chuột vào Section cần chỉnh sửa và nhấp chọn **Block Settings** (hoặc nhấp chuột vào khu vực nền khối).
{% endstep %}

{% step %}

#### Bước 2: Chọn tab Background

Tại bảng điều khiển bên trái, chọn mục **Background**.
{% endstep %}

{% step %}

#### Bước 3: Chọn loại Nền mong muốn

Lựa chọn loại media nền từ menu thả xuống:

* **Color**: Chọn màu đơn sắc hoặc gradient.
* **Image**: Tải file ảnh lên, chọn vị trí căn chỉnh và hiệu ứng cố định Parallax.
* **Video**: Tải file video loop hoặc nhập URL video.
  {% endstep %}

{% step %}

#### Bước 4: Tùy chỉnh Lớp phủ Overlay & Độ mờ

Chọn màu cho **Overlay Color** và kéo thanh điều chỉnh độ mờ (opacity) để cân bằng giữa tính thẩm mỹ và độ rõ của văn bản.
{% endstep %}

{% step %}

#### Bước 5: Xem trước trên Máy tính & Điện thoại

Chuyển đổi giữa chế độ xem Desktop và Mobile để đảm bảo hình nền tự động căn giữa đẹp mắt trên màn hình điện thoại nhỏ.
{% endstep %}

{% step %}

#### Bước 6: Lưu thay đổi

Nhấp nút **Save** trên thanh công cụ trên cùng để hoàn thành.
{% endstep %}
{% endstepper %}