Wix Harmony Editor: Customizing Your Section Background
A section’s background sets the tone for your page, guiding focus and shaping how visitors feel as they scroll. Design sections to align your site's brand and fine‑tune every detail — choose a solid color, an image or a video from the library, and apply subtle effects for depth.
Good to know:
Save time on design by choosing from a wide variety of ready-made, fully responsive sections. When adding a new section, you can see the full range and choose a template that meets your needs.
Changing your section background
Switch up your section background to instantly change the look and feel of your page. Choose a color, image, or video to match your style and grab attention.
To change your section background:
Select the relevant section.
Click Replace Background.
Choose the background type and customize it to your needs:
Color
Click the Color icon
.
Click the color circle.
(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.
Gradient
Click the Gradient icon
.
Choose a gradient type at the top: Linear
, Radial
, Conic
or Fluid
.
Adjust the gradient using the available options.
Image
Click the Image icon
.
Click the Add Image icon
.
(In the Media Manager) Select an image or upload it on the spot.
Click Add to Page to confirm.
Adjust any of the following settings:
Focal point: Drag the blue dot on the image to decide which part of the image is visible.
Image opacity: Drag the slider to make the image more or less visible.
Blend mode: Choose the way the image blends with the layer below (the color behind it). The default is Normal, which means your chosen image and color are not blended – the color only appears if your image's opacity is lower than 100%.
Color behind image: Select the color that appears behind the background image, if your image opacity is lower than 100%.
Settings
: Click the icon to decide how your image gets scaled to fit the section (Scale to fill, tile or the image's original size) and give it alt text to make the image accessible.
Note: If your image does not include important info for screen readers and search engines, enable the Set as decorative toggle instead of entering alt text.
Tips:
You can always click Replace Image to select a different background image. To remove the image completely, click the Remove icon
.
Need to touch up your image? Click the Edit icon
to access the Wix Photo Studio.
Video
Click the Video icon
.
Click the Add Video icon
.
(In the Media Manager) Select a video or upload it on the spot.
Click Add to Page to confirm.
Adjust any of the following settings:
Focal point: Drag the blue dot on the video to decide which part of the video is visible.
Video opacity: Drag the slider to make the image more or less visible.
Blend mode: Choose the way the video blends with the layer below (the color behind it). The default is Normal, which means your chosen video and color are not blended – the color only appears if your video's opacity is lower than 100%.
Color behind video: Select the color that appears behind the background video. This color is only visible if your video's opacity is lower than 100%.
Settings
: Click the icon to adjust the way the video plays (e.g. autoplay, play in a loop, quality, speed, etc). You can also give the video an accessible title (alt text).
(Optional) Preview the video background by clicking the Play icon
.
Tip: You can always click Replace Video at the top to select a different background video. To remove the video completely, click the Remove icon
.
Note about the mobile view:
On mobile, you can change the section background to a different solid color or gradient without affecting desktop. Image and video backgrounds are shared, so you can only replace them from desktop.
Animating your section background
Bring your section to life by adding a background scroll animation. As visitors move up and down your page, the animation creates a dynamic, engaging effect. Try out options like Parallax, 3D, or Zoom, and adjust the settings to match your style.
To animate your section background:
Select the relevant section.
Click the Animation icon
.
Select an animaion.
(Optional) Click Customize to fine‑tune your animation settings:
Preview on scroll: Click the Preview icon
to preview how your animation plays as visitors scroll.
Zoom: Drag the slider to adjust how much you want to zoom in or out.
Direction: Adjust the animation’s direction using the available options (e.g. clockwise or counterclockwise, in or out, etc).
Speed: Drag the slider to make the animation move quicker or slower.
Scale: Drag the slider to decide how far the background fades back.
Angle: Set the rotation angle of the animation.
Stretch: Set the depth and 3D feel of the animation.
Animation type: Choose if your animation fades in or fades out.
Notes:
The available animations depend on the background type you pick for your section (i.e. color, image or video).
The customization settings vary, based on the animation you select.
Need A Professional Website?
Contact Us Today!
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected
I'm a paragraph. I'm connected