> 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/website/page/how-to-customize-your-section-background-settings.md).

# Customize Section Background Settings

Learn how to customize section background settings in Hifunnel, including background colors, images, videos, gradients, overlays, and parallax effects.

Section Background Settings allow you to brand and elevate your landing pages by adding custom background colors, images, video loops, gradients, and overlay effects to any Section (Block).

***

## Background Types & Features

### 1. Solid Color & Gradients

Choose a solid background color from your site palette or apply smooth gradient transitions between two colors to give your section modern visual depth.

### 2. Background Image

Upload custom background images (e.g., textures, photography, patterns):

* **Image Position**: Top, Center, Bottom, or Custom focal points.
* **Fixed Background (Parallax Effect)**: When enabled, background images stay fixed in place while content blocks scroll smoothly over them on desktop screens.
* **Background Size**: Cover (fills the section), Contain (fits whole image), or Auto.

### 3. Background Video

Embed a background video loop (MP4 format or YouTube/Vimeo URL) to create dynamic hero banners that immediately capture visitor attention.

### 4. Background Overlay (Color & Opacity)

Apply a semi-transparent dark or light color overlay over background images/videos to ensure text readability and contrast.

{% hint style="warning" %}
**Troubleshooting: My Background Image/Video is Not Showing?** If an uploaded background image or video appears fully black or white, check your **Overlay Color** transparency slider. If the overlay opacity is set to 100% solid color, adjust the opacity slider down (e.g., 20%-50% or 0% transparent) to reveal the underlying media!
{% endhint %}

***

## How to Customize Section Background Settings

{% stepper %}
{% step %}

#### Step 1: Open Section Settings

In the Page Builder canvas, hover over the target Section and click **Block Settings** (or click the background area).
{% endstep %}

{% step %}

#### Step 2: Open Background Tab

In the left editor panel, select **Background**.
{% endstep %}

{% step %}

#### Step 3: Select Background Type

Choose your preferred background media type from the dropdown:

* **Color**: Pick a solid color or gradient background.
* **Image**: Upload an image file and select image positioning and parallax options.
* **Video**: Upload a video loop or enter a video URL.
  {% endstep %}

{% step %}

#### Step 4: Adjust Overlay & Opacity

Set the **Overlay Color** and adjust the opacity slider to balance visual style with text contrast.
{% endstep %}

{% step %}

#### Step 5: Preview on Mobile & Desktop

Toggle between Desktop and Mobile preview modes to ensure your background image centers appropriately on small phone displays.
{% endstep %}

{% step %}

#### Step 6: Save Changes

Click **Save** in the upper toolbar to persist your changes.
{% endstep %}
{% endstepper %}