Skip to main content

🖼️ How to Change Background Image (and Stop It Repeating)

Sometimes a background image looks perfect in preview but shows up repeated when applied to a section.
This usually happens when the image is small (for example, 400×272 px) and the CSS has background-repeat enabled.

Here’s how to change the background image in our editor and fix the repeating issue using Styles → Decorations.

🛠️ Step 1: Select the Section or Block​

  1. Open your page in the website editor.
  2. Click the section, row, or block where you want the background image.
  3. Make sure the right element is selected (you should see its name/label in the editor panel).

🎨 Step 2: Open Styles → Decorations​

  1. In the right-hand sidebar, go to Styles.
  2. Click on Decorations.
  3. Look for the Background options (image, color, repeat, size, position, etc.).

This is where you’ll control how your background behaves.

🖼️ Step 3: Choose or Replace the Background Image​

  1. In Styles → Decorations → Background Image, click the image picker or upload button.
  2. Select your file from the media library or upload a new one.
  3. The background will update immediately on the canvas.

💡 If you use a small image (for example, 400×272 px), the browser will usually tile/repeat it to fill the whole area — that’s why you see the pattern repeating. Change Background Image

You can also use a larger image (for example, 1920×1080 or similar) if you want a full-width, non-repeating hero background.

🔁 Step 4: Stop the Background from Repeating​

If your background is showing as a repeated pattern, adjust the repeat and size settings.

In Styles → Decorations → Background, set:

  • Repeat: No repeat
  • Size: Cover (or Contain, depending on your layout)
  • Position: Center (or Center Center)

Change Repeat Setting

In CSS terms, this is the equivalent of:

background-repeat: no-repeat;
background-size: cover;
background-position: center center;