# Thay nền/background cho section

Phần nền của một section có thể thể hiện dưới 3 dạng: **Hình ảnh, Màu sắc hoặc Video.**

1. **Thay ảnh làm hình nền:**

Để thay ảnh làm nền bạn lựa chọn thiết lập như hình dưới:

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2FJwBpSkqnSbKK9YbdYn42%2Fsection%20n%E1%BB%81n%20%E1%BA%A3nh.png?alt=media&#x26;token=2d287062-b2b5-4d69-ad1a-adfbbcf7a41c" alt=""><figcaption></figcaption></figure>

Cửa sổ quản lý thư viện hiện ra bạn bấm nút Chọn tệp để tải ảnh từ máy tính của mình lên thư viện.

![](https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2FndqOR30oDCJfq7babez9%2Fimage.png?alt=media\&token=eaa573f0-a5e1-4740-ade8-2442e183ff9a)

Chọn ảnh bạn vừa tải lên từ danh sách ảnh trong thư viện sau đó bấm nút **Sử dụng** để chèn ảnh vào Landing Page hoặc bạn có thể click đúp vào ảnh muốn chèn.&#x20;

![](https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2FvYgly3Dq6wVVzB1ynf2M%2Fimage.png?alt=media\&token=ddfd923a-d644-415d-a79a-7ecf309d9100)

Bạn có thể chọn các kiểu cho ảnh nền section: Vừa khung tự động, Mặc định, Vừa khung cao, Vừa khung rộng và Parallax hoặc Tùy Chỉnh lại kiểu hiển thị của ảnh&#x20;

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2F2A8EpMbkvHk8jmeeLOAX%2Fki%E1%BB%83u.png?alt=media&#x26;token=3f2be98e-15b5-44dd-b5a1-79f6ec806cda" alt=""><figcaption></figcaption></figure>

* Các kiểu "Vừa khung tự động; Vừa khung cao; Vừa khung rộng" sẽ cân đối chiều dọc, chiều ngang của ảnh cho vừa khung hình.&#x20;
* Kiểu parallax là kiểu hiển thị ghim ảnh khi cuộn chuột.

**Giao diện mobile không hỗ trợ kiểu Parallax, nên trên thiết kế mobile, bạn không đồng bộ thiết kế desktop Mobile và chọn kiểu khác cho ảnh nền section mobile.**

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2FbUJqKykMkZxHFArw5dfQ%2F%C4%91%E1%BB%93ng%20b%E1%BB%99.png?alt=media&#x26;token=5e642506-b90f-4c53-a564-2ccebf27a89d" alt=""><figcaption></figcaption></figure>

* **Tùy chỉnh lại ảnh hiển thị**: trong trường hợp bạn tải lên 1 ảnh nhỏ, nhưng muốn nó hiển thị vừa màn hình theo cách lặp lại liên tục cách ảnh hoặc giãn ảnh theo kích thước tùy biến, thì bạn có thể sử dụng  mục tùy chỉnh&#x20;

Bạn thay đổi thông số ở mục kích thước bằng cách chọn sẵn thông số gợi ý ( 100% 100% là vừa     màn hình , 50px 50px là tạo lặp lại các ảnh kích thước 50px ). Bạn sửa các thông số 50px theo nhu cầu của bạn&#x20;

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2FinunQ5zo7lMMLceOYziR%2Fimage.png?alt=media&#x26;token=ef8ea0f8-5cbe-404c-8106-3426b365e240" alt=""><figcaption><p>Ví dụ trường hợp chọn  kích thước 100% 100%</p></figcaption></figure>

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2Fd7jrzlQVZAfEnMPiZTqP%2Fimage.png?alt=media&#x26;token=9f4b7159-0762-4de6-9b94-7f7898a3857c" alt=""><figcaption><p>Ví dụ về trường hợp chọn kích thước 50px 50px </p></figcaption></figure>

Bạn có thể tạo màu/hình ảnh phủ trên ảnh nền section bằng cách sử dụng Overlay. Bạn vào mục Overlay --> chọn kiểu (Màu cơ bản/Màu gradient)--> Tùy chỉnh thanh độ phủ Opacity như hình bên dưới:

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2FEJHN9O61G9SauVtZRI60%2Foverlay.png?alt=media&#x26;token=5cf06652-1cb3-43d5-950b-591bed5fe118" alt=""><figcaption></figcaption></figure>

Nếu bạn chọn Overlay kiểu hình ảnh, bạn có thể sử dụng thêm Blend Mode và Trong suốt để thiết kế thêm sinh động:

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2FDdGaKjKTuMGq0cwioE74%2Foverlay%20%E1%BA%A3nh.png?alt=media&#x26;token=af3b6cb2-13e7-4893-9947-68433771095c" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

* Bạn có thể tải ảnh dung lượng dưới 5MB và kích thước dưới 3000\*3000px.
* Kích thước cho ảnh nền section bạn có thể tham khảo:

Desktop: ngang 1960px, chiều dọc tùy ý nhưng nhỏ hơn 800px, đẹp nhất là từ 600 đến 768px

Mobile: ngang 420px (hoặc 320px), chiều dọc tùy ý.

* Bạn nên tối ưu lại dung lượng ảnh trước khi đưa lên builder sử dụng, để đảm bảo trang có tốc độ load tốt nhất. Ví dụ về công cụ hỗ trợ tối ưu dung lượng mà giữ được chất lượng ảnh <https://tinypng.com/>.
  {% endhint %}

**2. Thay video làm hình nền section.**

Để thay **video** làm nền, bạn lựa chọn thiết lập như hình dưới:

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2FElrEaHubnHwnklsWLhBe%2Fsection%20video.png?alt=media&#x26;token=3fb8bb4b-b220-4763-9d35-d65c96bbb80f" alt=""><figcaption></figcaption></figure>

Bạn có thể chèn trực tiếp link của Youtube hoặc dùng LadiPage Video bằng cách tải trực tiếp video lên builder.

{% hint style="danger" %}

* Tính năng LadiPage Video chỉ áp dụng cho tài khoản trả phí trở lên và dung lượng video tải lên phải dưới 5Mb (đối với gói Pro/Standard/Lite), dưới 20 Mb (đối với gói có tính năng phân quyền Premium/Enterprise/Business)
* Khi chèn Video Backgroud trong builder sẽ không hiển thị, phải xuất bản ra thì mới nhìn thấy nội dung video.
* Nền section là video thì video sẽ tự động chạy và không có tiếng.
  {% endhint %}

**3. Nền section chọn kiểu Màu cơ bản hoặc Màu gradient.**

Bạn có thể đồ màu nền cho section bằng cách sử dụng Màu cơ bản hoặc Màu Gradient:

<figure><img src="https://4163873660-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVlMUbaIjYt7SY2R8v2az%2Fuploads%2FO6wAlxFQ63aBuPswPPNB%2Fn%E1%BB%81n%20m%C3%A0u.png?alt=media&#x26;token=b3e5add6-c1e3-403f-b1fd-0e0c63e2d245" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
**Lưu ý:**&#x20;

* Nếu bạn thiết kế landing page chọn kiểu thiết kế là Responsvie, bạn có thể tùy chỉnh nền section giao diện Desktop và mobile khác nhau bằng cách chọn không đồng bộ thiết kế, chi tiết [tại đây](https://help.ladipage.vn/nang-cao-cho-phan-tu/dong-bo-khong-dong-bo-thiet-ke).
  {% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://helpv3.ladipage.vn/cac-phan-t-co-ban-tren-landingpage/phan-tu/hinh-anh/thay-nen-background-cho-section.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.