--- title: "Adding Background Image and Video to the Page" slug: "adding-background-image-and-video-to-the-page" description: " Learn how to add and customize background images and videos on your page to enhance visual appeal and create an engaging user experience." tags: ["editor", "background image", "background video"] updated: 2024-11-18T13:43:41Z published: 2024-11-18T13:43:41Z canonical: "support.myclickfunnels.com/adding-background-image-and-video-to-the-page" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.myclickfunnels.com/llms.txt > Use this file to discover all available pages before exploring further. # Adding Background Image and Video to the Page Adding background images and videos to your page can greatly enhance its visual impact and set the tone for your content. Backgrounds can help highlight your brand, create a cohesive look, and make your page more engaging. This guide will walk you through adding and customizing background images and videos on your page. --- ## Requirements 1. An active ClickFunnels account. 2. A page created in your workspace. --- ## Accessing Background Options 1. Open your page editor and go to the top toolbar. 2. Click on the **Settings** (gear) icon. 3. In the dropdown menu, select **Background** to open the background options panel.![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(252).png) --- ## Adding a Background Image or Video The **Background** property allows you to add and customize background images for various containers, such as sections, rows, columns, flex containers, or individual elements like videos. Turning on the Background option activates the settings, allowing you to configure the background image’s source, style, fit, and color options. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1731324569651.png) 1. **Image URL**: Enter the background image URL or upload one directly in the ClickFunnels image gallery. 2. **Image Style**: Controls how the background image is displayed within the container. - **None**: Displays the background image in its original size and position without additional styling, possibly leaving gaps if the image is smaller than the container. - **Full Center**: Centers the image within the container without resizing, which may leave blank spaces if the image is smaller than the container. - **Full Center (Parallax)**: Centers the image and applies a parallax scrolling effect, creating a layered look as the image moves independently of the main content. Note:Due to iOS limitations, parallax effects are automatically disabled on Apple mobile devices. iOS devices (Safari and other WebKit browsers) have limited or no support for **`background-attachment: fixed`**, which is a core part of how parallax scrolling is implemented in CSS. To maintain layout integrity, the background will default to a static style (e.g., Full Center). - **Fill 100% Width**: This option expands the image to cover the container’s full width, maintaining its aspect ratio and possibly cropping vertically. - **Fill 100% Width & Height**: This stretches the image to fill both the width and height of the container, cropping parts of the image to maintain the aspect ratio. - **No Repeat**: Displays the image once without repeating; any unused space will remain empty. - **Repeat**: Tiles the image across the container, covering both width and height. - **Repeat Horizontally**: Repeats the image across the container’s width only. - **Repeat Vertically**: Stacks the image vertically along the container’s height. 3. **Image Fit**: Position the image within the container (e.g., center, top-left, bottom-right) for better alignment. This setting appears when **Contain** or **Scale-down** is selected under Image Style. 4. **Color**: This option allows you to set a **Background** and **Foreground** color: - **Background Color**: If you do not wish to use a background image, you can apply a solid or gradient color directly as the background. Choose from the color picker for custom colors, or select a color from your Style Guide for consistency. When a background image is used, the background color generally won’t be visible, but it can appear momentarily during the image load time or serve as a fallback if the image fails to load. - **Foreground Color**: Adds an overlay on top of the background image, allowing for opacity adjustments to create a tinted or softened effect over the image. This layering can enhance readability or add a stylistic tint to the image. 5. **Background Video**: To use a video as the background, toggle on the option "Background Video." Enter a YouTube or Vimeo video URL to set the video as the background for the container. Note:The Background Video option is available only in the **Section**, **Row**, and **Flex** containers. > [!TIP] > Tips > > For further information on background properties in CSS, refer to the [MDN documentation on Background CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/background). To learn more about adding images, refer to our [Adding and Managing Images](/v1/docs/image-adding-and-managing-images) article. ## Related - [Page Editor: Adding Sections](/page-editor-adding-sections.md) - [Page Editor: Understanding Columns](/page-editor-understanding-columns.md) - [Page Editor: Adding Rows](/page-editor-adding-rows.md) - [Page Editor: Adding Elements](/page-editor-adding-elements.md)