How to update your website background

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.

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.

To set a color as a section's background:

1. Open the Website Builder 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.
3. With the section selected, scroll to Fill in the design panel on the right, then open Background.
   
   
   
4. When you choose Color as your background type and open the color picker, you'll see two tabs: Theme and Custom.
   
   
   
   
   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. 
   
   
   

To set an image as a section's background:

1. Open the Website Builder 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.
3. With the section selected, scroll to Fill in the design panel on the right, then open Background.
   
   
   
4. Under the Custom tab, choose Media, then select or upload your image.
   
   
   
   
   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.

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.

1. Open the Website Builder 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.
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.
   
   
   
4. In the background options, select the Custom tab, then choose Media.
   
   
   
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.
   
   
   

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.

• 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.