Skip to content

Setting Background In Different Ways

Background Color

Setting a background color is a fundamental aspect of web design, adding visual appeal to elements. While images and videos can’t directly have background colors, you can use them as background elements. Apply colors using hex, rgba, or color names, and use the color picker. For consistent site-wide colors, you can leverage the styles for the App layer.

Styling the App Layer

Select App from the Layers panel.

Once set, the background style of the App tag becomes the default for all elements, enabling changes not only to color but to various style properties.

Background Image

Webflow offers versatile options for customizing background images:

Adding or Changing a Background Image

  1. Navigate to Backgrounds in the Style panel.
  2. Click ’+’ and select an image from your local storage.

Background Image Size and Position

  1. Specify size using custom dimensions, percentages, or presets like Cover or Contain.
  2. Adjust position horizontally and vertically, changing units between px, %, VW, and VH.

Tile, Scroll, and Repeat Options

  1. Control image tiling horizontally, vertically, or not at all.
  2. Choose between Fixed and Not Fixed for background image behavior on scroll.

Gradients

Enhance backgrounds with gradients, either standalone or layered over colors or images.

Linear Gradients

  1. Adjust the angle using the direction dial or arrows.
  2. Add gradient stops for color transitions.
  3. Tweak stop positions for a customized look.
  4. Toggle Repeat for repeating gradients.

Radial Gradients

  1. Set the focal point using the position control.
  2. Adjust positioning manually or use presets like Closest side or Farthest corner.

Color Overlay

Add a color overlay to backgrounds, controlling opacity for a subtle effect.

Layering Images and Gradients

Stack multiple background elements for layered effects. Use the Style panel to reorder and manage layers.

Background Video

Background videos add dynamic elements to sections but require thoughtful implementation.

Adding a Background Video

  1. Use Quick find or the Add panel to insert a Background video component.
  2. Upload a video file (formats: webm, mp4, mov, ogg).

Background Video Settings

  1. Enable settings like Loop video, Autoplay video, and Include play/pause button.
  2. Provide controls for accessibility and user experience.