---
title: "How to update your website background"
updated: 2026-06-22
---

# How to update your website background

> **Notice**
>
> This article covers the Website Builder, which is continuously evolving based on customer feedback. Some details shown here may differ from what you see in-app.

Backgrounds let you control the visual layer behind your site's content — from a simple color fill to a dynamic video. You can apply backgrounds at the section level, giving you fine-grained control over how each part of your page looks.

---

## Background options overview

When you select a section on the canvas, the design panel on the right shows that section's settings. Scroll to the **Fill** section and open **Background** to see your options.

There are 3 types of backgrounds you can apply to any section:

-   **Color**: A solid color, gradient, or color with opacity. You can choose from your publication's theme colors or set a custom color.
-   **Image**: A static image pulled from your media library or uploaded directly.
-   **Video**: A video that plays behind your section content, linked by URL.

> **Reminder**
>
> Don’t forget to [publish your page](https://beehiivhelp.zendesk.com/hc/en-us/articles/34055410040727) to see your changes reflected live on your website.

---

## Using theme colors for backgrounds

To set a color as a section's background:

1.  Open the [**Website Builder**](https://app.beehiiv.com/website_builder_v2) and go to the page you want to edit.
2.  Select the section you want to update. You can click the section directly on the canvas, or open the **Layers** tab in the left icons menu and select it there. For help targeting the right layer, see [How layers work in the beehiiv Website Builder](https://beehiivhelp.zendesk.com/hc/en-us/articles/36109458207255).
3.  With the section selected, scroll to **Fill** in the design panel on the right, then open **Background**.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/41015662423575)
4.  When you choose **Color** as your background type and open the color picker, you'll see two tabs: **Theme** and **Custom**.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/41015675153175)  
    The **Theme** tab shows your publication's color palette. You can choose between any of these colors, with each color’s default use as shown:   
      
    **Background:** Default page-level background.  
    **Text on background:** Text that sits on the Background color.  
    **Primary:** Primary accent color.  
    **Text on primary:** Text that sits on the Primary color.  
    **Border:** Borders and dividers.  
     
5.  Once you select your color, you can also use the **Opacity** slider to adjust how transparent your background is. Click and drag to adjust to your preferred setting.   
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/41015662424599)

> **Pro Tip**
>
> Using theme colors for your section backgrounds keeps your site visually consistent. If you ever update a theme color, every section using it will update automatically.

---

## Using an image background

To set an image as a section's background:

1.  Open the [**Website Builder**](https://app.beehiiv.com/website_builder_v2) and go to the page you want to edit.
2.  Select the section you want to update. You can click the section directly on the canvas, or open the **Layers** tab in the left icons menu and select it there. For help targeting the right layer, see [How layers work in the beehiiv Website Builder](https://beehiivhelp.zendesk.com/hc/en-us/articles/36109458207255).
3.  With the section selected, scroll to **Fill** in the design panel on the right, then open **Background**.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/41015662423575)
4.  Under the **Custom** tab, choose **Media**, then select or upload your image.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/41015675154327)  
    Or, if you’d like, you can browse your media library for images. For more details, read [Using the media library for your website and posts](https://beehiivhelp.zendesk.com/hc/en-us/articles/38353759606295).

---

## How to add a video background

You can set a video as the background of any section on your site, giving your pages a more dynamic, custom look. Video backgrounds work by linking to a video that is already hosted online — you provide the video's URL, and beehiiv plays it behind that section's content.

> **Reminder**
>
> You can't upload a video file to use as a section background. You'll need a URL that points to a video already hosted online. Image backgrounds can still be uploaded or chosen from your library as usual. The URL-only requirement applies to video.

1.  Open the [**Website Builder**](https://app.beehiiv.com/website_builder_v2) and go to the page you want to edit.
2.  Select the section you want to update. You can click the section directly on the canvas, or open the **Layers** tab in the left icons menu and select it there. For help targeting the right layer, see [How layers work in the beehiiv Website Builder](https://beehiivhelp.zendesk.com/hc/en-us/articles/36109458207255).
3.  With the section selected, the design panel on the right shows the section's settings. Scroll to the **Fill** section. Under **Fill**, open **Background**.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/41015662423575)
4.  In the background options, select the **Custom** tab, then choose **Media**.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/41015675156759)
5.  Paste the link to your hosted video into the **Media URL** field. Once a video link is added, the section's background is set to **Video**, and the video plays behind your section content.  
      
    ![](https://beehiivhelp.zendesk.com/hc/article_attachments/41015662426391)

> **Tech Note**
>
> The media URL text field accepts .mp4, .webm, or .mov video formats.

### Make text readable over your video

Busy or bright videos can make overlaid text hard to read. Adding an overlay on top of the video fixes this:

1.  With the section still selected, find the **Overlay color** control in the background options.
2.  Choose an overlay color (black is a common choice for a darkening effect).
3.  Adjust the overlay opacity until your text is easy to read against the moving video.

> **Pro Tip**
>
> A semi-transparent dark overlay — for example, black at a lower opacity — is an easy way to keep headings and buttons legible without hiding the video entirely.

### Tips for choosing a video

-   Use a video that is already hosted online and reachable by a direct link, since uploads are not supported for backgrounds.
-   Keep videos short and optimized for the web. Large or long videos can slow down how quickly your page loads for visitors.
-   Always preview on both desktop and mobile, since a video that looks great on a wide screen can crop or shift on smaller devices.

---

## Frequently asked questions updating your website background

Can I use a gradient as a section background?

Yes. When you select **Color** as your background type, the color options include solid color, gradient, and color with opacity.

Can I upload a video file to use as a background?

No. Video backgrounds require a URL pointing to a video already hosted online. You can't upload a video file directly. Image backgrounds still support uploads from your media library.

Where do I set the background for my post pages?

Post page backgrounds are set in the Website Builder at the Post page level. For more information, read [How post styling works across email and web](https://beehiivhelp.zendesk.com/hc/en-us/articles/38837333313559).