Optimize for non-Webflow sites

Change an element's background

Updated

Style backgrounds with a color or an image in the visual editor.

Backgrounds can help shape how your content looks and feels — whether you’re adding a color for contrast or an image for texture. Try different styles to highlight key content or guide visitor focus. For example, using a high-contrast background on a CTA button can help it stand out.

Change an element’s background

In the visual editor:

  1. Select an element
  2. Go to Background in the Changes panel
  3. Enter a color value, use the color picker, or paste an image URL into the Image field

Background color options

You can apply a background color using:

  • Color value — click the Color field to enter an RGB, CMYK, or HEX value
  • Color picker — click the color square, then click a color or use the Eyedropper to sample one from the page

Background image options

Good to know

Images can't be uploaded to Optimize — upload them where your site images are hosted, then copy their URL.

After pasting an image's URL into the Image field, you can adjust how it appears:

  • Size — choose how the image scales (e.g., expand to fill, shrink to fit)
  • Tile — set how the image repeats (e.g., repeat horizontally, vertically, or not at all)
  • Image alignment — choose the image’s position within the element

To use custom values for alignment: Left controls the X axis, and Top controls the Y axis. For example, Left 0% / Top 0% positions the image at the top left, and Left 100% / Top 100% places it at the bottom right.