Site Performance: Seeing a Flash of Color As Elements Load

When applying media background (image or video) to a page, section or element, site visitors might see a quick flash of color while the background is loading.

Usually, the background media loads fast enough that site visitors don't notice the background color. To make this flash of color less visible, you can change the background color of the affected elements.

Causes of color flashes

It can take longer for image and video backgrounds to load on the live site. If a site visitor is using a slower internet connection, or if the background media is large, a flash of color may appear before the image or video loads.

Changing the background color of pages and elements can make this flash less noticeable. We recommend choosing a color as similar as possible to the video or image to improve the experience for site visitors.

Changing the background color of site pages

If you have added a background image or video to a page in your Wix Editor site, you can change the background color from the Site Design panel.

Using the Studio or Harmony Editor?

It is not possible to add media to a page background in these editors, so you don't need to worry about this step.

To change the page background color:

1. Go to the page in your editor.

2. Click Site Design

   

   on the left side of the editor.

3. Click Page background.

4. Click the flap at the top left of the background image preview.

5. Select the shade you want from your site's theme colors, or apply / create a custom color under My colors.

Good to know:

You can apply this color to all pages with the same the image / video background by clicking Apply to Other Pages at the bottom of the panel.

Changing the background color of sections, strips, and cells

If you have added an image or video background to a section, you change the color from your editor to match the media's color scheme. Depending on your site builder, you can also change the color of strips or grid cells.

Wix Editor

When building a site with the Wix Editor, you can change the background color of sections and strips on a page.

To change a section's background color:

1. Go to your editor.

2. Right-click the relevant section.

3. Select Change Background.

4. Click the flap at the top left of the background image preview.

5. Select the shade you want from your site's theme colors, or apply / create a custom color under My colors.

To change a strip's background color:

1. Go to your editor.

2. Click the strip.

3. Click Change Background.

4. Click the flap at the top left of the background image preview.

5. Select the shade you want from your site's theme colors, or apply / create a custom color under My colors.

Studio Editor

With the Studio Editor, you can change the background color of sections from the Inspector panel. If you have a grid section, you can also change the background color of each cell.

To change a section's background color:

1. Go to your editor.

2. Select the relevant section on the page.

3. Click the Open Inspector icon

   

   at the top right of the editor.

4. Click the color box under Color.

5. Select the shade you want from the theme colors, or add / apply a custom color.

To change a cell's background color:

1. Go to your editor.

2. Select the relevant cell in the section.

3. Click the Open Inspector icon

   

   at the top right of the editor.

4. Click the color box under Background.

5. Select the shade you want from the theme colors, or add / apply a custom color.

Note:

It is not possible to add an image or video to a cell background. However, you can change the color to match media you attach to the cell.

Wix Harmony Editor

When building a site with the Wix Harmony Editor, you can change the background color of sections on your page. If your section is divided into a grid, you can also change the background color of specific cells.

To change a section's background color:

1. Go to your editor.

2. Click the relevant section.

3. Click Replace Background on the action bar.

4. Click the Color icon

   

   .

5. Click the color circle.

6. (In the Color Picker) Choose one of your brand colors or a custom color.

   Tip: Click the Eyedropper icon

   

   to get a specific color from your page.

To change a cell's background color:

1. Go to your editor.

2. Click the relevant section.

3. Click the relevant cell.

4. Click Replace Background on the action bar.

5. Click the Color icon

   

   .

6. Click the color circle.

7. (In the Color Picker) Choose one of your brand colors or a custom color.

   Tip: Click the Eyedropper icon

   

   to get a specific color from your page.

Changing background color of slides

Slideshows are an eye-catching, interactive way to showcase media and content on a site. Align the background color of slides with their media to keep a professional, cohesive look.

Using the Studio Editor?

It is not possible to add media to a slideshow item background or customize slideshow items individually.

To change a slide's background color:

1. Go to your editor.

2. Select the slideshow on the page.

3. Click the blue arrows to navigate to the relevant slide.

4. Click Change Slide Background.

5. Click the flap at the top left of the background image preview.

6. Select the shade you want from your site's theme colors, or apply / create a custom color under My colors.