Positioning background images

🔎 Purpose

Elementor allows you to control exactly how background images are displayed inside sections, columns, or widgets. This includes options for position, repeat behavior, size, and responsiveness, helping you design layouts that look polished on all devices.

1. Think of the Container as a Frame

Every background image sits inside a frame (the element’s container). Since image and container sizes often don’t match, you need to define how the image will appear within that space.

2. Position

This setting controls which part of the image is shown or where it’s placed:

• If the image is larger than the container: the position setting decides which portion is visible (e.g., top left, center, bottom right).

• If the image is smaller than the container: the position defines where it appears within the container.

• Preset options include center, top-left, bottom-right, etc.

• A custom option allows you to set the exact X and Y position using sliders.

3. Repeat

Controls whether and how an image tiles inside the container:

• Repeat: Default setting that tiles the image to fill the area.

• No-repeat: Displays the image only once.

• Repeat-X: Repeats horizontally.

• Repeat-Y: Repeats vertically.

4. Size

Defines how the image scales within the container:

• Cover: Fills the entire container. Crops parts if needed.

• Contain: Displays the entire image but may leave empty space around it.

• Custom: Allows manual width adjustment; height adjusts automatically to keep proportions.

5. Best Practices

• Choose background images that match the shape and size of their containers to minimize distortion or blank space.

• Use wide (landscape) images for horizontal layouts and tall (portrait) images for vertical spaces.

6. Responsive Backgrounds

• You can set different background images for desktop, tablet, and mobile views.

• This improves both appearance and performance on smaller screens by using better-fitting, optimized images.

✅ Summary of Main Settings