This procedure is intended for Page Designer administrators who want to enhance content by placing it over an image background rather than a solid-colored background.

Component Objective

The Background Image Component is a container component that allows content to be displayed over a selected background image.

It follows a similar principle to the Background Color Component, except that the visual treatment is created using an image rather than a solid background color.

The basic structure is:

Background Image Component

↓

Content

↓

Text content

The background image sits behind the content placed within the component.

Content-Driven Background Area

The background area follows the space occupied by the content.

This means that the selected image should not be approached like a standard standalone image where the entire visual necessarily needs to remain visible.

The amount and presentation of the background image will depend on:

• The content placed inside the component
• The resulting content area
• The selected Background Size

This is an important consideration when selecting the visual.

Background Settings

Selecting Background Image in the Page Structure opens the component's Background Settings.

The available settings are:

• Background Image
• Background Size
• Text Color

Background Image

Background Image is required.

Select the visual that will be used behind the content.

The visual should be selected specifically with its role as a background in mind.

Do not assume that an image that works well as a standalone visual will automatically work well as a background image.

Background Size

The Background Size field provides three available options:

• cover
• contain
• auto

The selected option affects how the image behaves within the available background area.

Cover

Use cover when the objective is for the image to cover the available background space.

Because the visual is being used as a background, do not rely on every part of the original image remaining visible.

Contain

contain can be used when the visual is intended to behave more like a repeated background treatment or motif within the available space.

This can be particularly useful with visuals designed to work as textures or repeating elements.

Auto

auto is also available as a Background Size option.

Choose the Background Size according to the selected visual and the intended background treatment.

Always validate the actual result rather than assuming that the original image will render exactly as it appears in the Media Library.

Text Color

The component includes a Text Color setting.

The color can be configured using:

• The available color selection
• A hexadecimal color code

Choose the text color according to the selected background image.

Readability should always take priority.

A visually attractive background is not appropriate if it makes the text difficult to read.

Text Color and Textbox Plus

When Textbox Plus is used inside the Background Image Component, there is an important color hierarchy.

The Text Color configured on the Background Image Component overrides a standard text color selected inside Textbox Plus.

Conceptually:

Background Image Component Text Color

overrides

Textbox Plus standard text color

If an administrator changes the standard text color inside Textbox Plus but the expected color is not displayed, the parent Background Image Component's Text Color should be checked.

This is expected behavior.

Choosing the Right Background Image

Asset selection is particularly important with this component.

The selected image is being used as a background treatment, not simply displayed as a normal image.

A visual can therefore look significantly different once used inside the Background Image Component.

Avoid Images That Depend on Small Details

Images containing small or important details may not work well.

For example, when the component contains only a small amount of text, the resulting background area may not provide enough space for the important details of the original image to remain visible.

Do not select an image simply because it looks good when viewed on its own.

Consider how it will work once it becomes a background.

Recommended: Textured Backgrounds

Textured backgrounds are recommended for this component.

A background that does not depend on a precise focal point is generally better suited to the way the component works.

Suitable approaches can include:

• Textures
• Patterns
• Gradients
• Abstract background imagery
• Visuals designed specifically to work as background treatments

These types of visuals remain useful even when only part of the original image is visible or when the background treatment repeats.

Intended Use

Use the Background Image Component when content requires additional visual treatment and an image-based background is appropriate.

It is particularly useful when the objective is to create a more visually distinctive text section without introducing a standalone image next to or above the content.

The background should support the content rather than compete with it.

Versatility

The Background Image Component provides an alternative to a simple solid-colored content background.

Its visual result can vary considerably depending on:

• Background image
• Background Size
• Amount of content
• Text Color

This provides design flexibility, but it also means that the final result needs to be evaluated carefully.

The administrator should not expect the original background asset to look exactly the same once used by the component.

Background Image Is Required

A Background Image must be selected before using the component.

Choose the Image as a Background, Not as a Standalone Visual

An image that looks good by itself may not work well once used as a background.

Select assets according to their suitability for this specific purpose.

Avoid Important Small Details

Do not rely on small details remaining visible.

The background area depends on the content, and the resulting image presentation may show considerably less of the original visual than expected.

Textured Backgrounds Are Recommended

Prefer textures and other background-oriented imagery that can remain effective without requiring a specific focal point to be visible.

Background Size Changes the Result

The component provides:

• cover
• contain
• auto

The selected option can significantly change how the visual appears.

Always validate the result.

Prioritize Text Readability

The image must not make the text difficult to read.

Choose an appropriate Text Color based on the selected background.

Background Image Text Color Overrides Standard Textbox Plus Color

When Textbox Plus is used within the component, the Text Color configured on the Background Image Component overrides the standard text color selected inside Textbox Plus.

If a Textbox Plus color appears not to be working, check the parent component first.

1. Determine Whether an Image Background Is Appropriate

Review the content and intended design.

Use Background Image when an image-based background provides a useful visual treatment behind the content.

Do not use it simply because an image is available.

The visual needs to work specifically as a background.

2. Select an Appropriate Background Asset

Before configuring the component, consider the visual itself.

Prefer imagery such as:

• Textures
• Patterns
• Gradients
• Abstract visuals
• Other imagery that does not depend on a precise focal point

Avoid images where important information or visual meaning depends on small details remaining visible.

3. Add the Background Image Component

Locate the Background Image Component in Page Designer.

Add it to the required location in the page structure.

The component exposes a Content area for the content displayed over the background.

4. Open Background Settings

Select Background Image in the Page Structure.

The component properties open on the right side of Page Designer.

The available Background Settings include:

• Background Image
• Background Size
• Text Color

5. Select the Background Image

Under Background Image, select the required visual.

Remember that this visual will become the background of the content rather than behave as a standalone image.

6. Select the Background Size

Open the Background Size menu.

Choose between:

• cover
• contain
• auto

Use cover when the objective is for the image to cover the available background space.

Use the alternative background treatment when the visual is intended to work more like a repeated motif or pattern.

Select the setting according to the image and intended result.

7. Configure the Text Color

Configure Text Color using either:

• The available color selection
• A hexadecimal color code

Select a color that remains clearly readable against the chosen image.

Do not choose the text color independently from the background.

8. Add the Text Content

Add the required text component into the Background Image Component's Content area.

Configure the text according to the requirements of the selected text component.

9. If Using Textbox Plus, Check the Text Color Hierarchy

If Textbox Plus is used inside the component, remember:

Background Image Text Color overrides the standard Textbox Plus text color.

If the text is not displaying the color selected within Textbox Plus:

1. Select the parent Background Image Component.
2. Review its Text Color.
3. Remember that the parent setting takes precedence.

10. Review How the Image Interacts With the Content

Evaluate the resulting composition.

Check whether:

• The image still works as a background.
• Important visual information has disappeared.
• The selected Background Size produces an appropriate result.
• The image is too detailed for the available space.
• The background competes with the text.
• The text remains easy to read.

If the image does not work, change the asset rather than trying to force a detailed standalone image into a background role.

11. Consider a Textured Background Instead

If the selected image does not produce the intended result, consider replacing it with a textured or background-oriented visual.

A simpler background can often produce a stronger result because it does not depend on specific details remaining visible.

12. Apply the Configuration

After configuring the Background Image Component, click Apply to save the configuration.

Complete the required Apply actions for the text component placed inside it as well.

13. Validate on Staging

Validate the completed page on the appropriate staging storefront.

Check the component across the required screen sizes and confirm that:

• The background image renders appropriately.
• The selected Background Size produces the intended treatment.
• The background works with the amount of content.
• Important image details are not required for the composition to make sense.
• The configured Text Color displays correctly.
• Text remains clearly readable.
• Textbox Plus standard text colors are correctly overridden by the parent Text Color.
• The overall image and text combination works as a single composition.

The key principle is:

Treat the image as a background asset, not as a standalone visual. Prefer textures or imagery that does not depend on small details, select the appropriate Background Size, and always prioritize text readability over the image itself.