Background - Creative Elements Documentation

Background lets you define the site-wide background of the Body, Wrapper, and Content areas. Each area can use either a solid or image-based Classic background, or a Gradient.

These settings are useful for establishing the overall canvas of the storefront before styling individual containers, widgets, and page elements.

Tip: Start with the Body background, then use Wrapper and Content only when those areas need their own visual layer. Keeping unnecessary backgrounds transparent makes the relationship between the three areas easier to manage.

Body

Set the background of the site's Body area. Choose between a Classic background and a Gradient.

Background Type

Choose how the background is created.

Classic

Color

Set a solid background color.

Image

Select a background image. Once an image is selected, additional controls become available.

Loading: Choose Default or Preload.
Position : Choose a predefined image position or Custom.
X Position : Set the horizontal position when Position is Custom.
Y Position : Set the vertical position when Position is Custom.
Attachment: Choose Default, Scroll, or Fixed. Fixed attachment works only on desktop.
Repeat : Choose Default, No-repeat, Repeat, Repeat-x, or Repeat-y.
Size : Choose Default, Auto, Cover, Contain, or Custom.
Width : Set a custom background image width when Size is set to Custom.

Gradient

Color: Set the first gradient color.
Location: Set where the first color is positioned in the gradient.
Second Color: Set the second gradient color.
Location: Set where the second color is positioned in the gradient.
Type: Choose Linear or Radial.
Angle: Set the direction of a Linear gradient.
Position: Set the origin of a Radial gradient, such as Center Center, Top Left, or Bottom Right.

Wrapper

Set the background of the site's Wrapper area. Choose between a Classic background and a Gradient.

Background Type

Choose how the background is created.

Classic

Color

Set a solid background color.

Image

Select a background image. Once an image is selected, additional controls become available.

Loading: Choose Default or Preload.
Position : Choose a predefined image position or Custom.
X Position : Set the horizontal position when Position is Custom.
Y Position : Set the vertical position when Position is Custom.
Attachment: Choose Default, Scroll, or Fixed. Fixed attachment works only on desktop.
Repeat : Choose Default, No-repeat, Repeat, Repeat-x, or Repeat-y.
Size : Choose Default, Auto, Cover, Contain, or Custom.
Width : Set a custom background image width when Size is set to Custom.

Gradient

Color: Set the first gradient color.
Location: Set where the first color is positioned in the gradient.
Second Color: Set the second gradient color.
Location: Set where the second color is positioned in the gradient.
Type: Choose Linear or Radial.
Angle: Set the direction of a Linear gradient.
Position: Set the origin of a Radial gradient, such as Center Center, Top Left, or Bottom Right.

Content

Set the background of the site's Content area. Choose between a Classic background and a Gradient.

Background Type

Choose how the background is created.

Classic

Color

Set a solid background color.

Image

Select a background image. Once an image is selected, additional controls become available.

Loading: Choose Default or Preload.
Position : Choose a predefined image position or Custom.
X Position : Set the horizontal position when Position is Custom.
Y Position : Set the vertical position when Position is Custom.
Attachment: Choose Default, Scroll, or Fixed. Fixed attachment works only on desktop.
Repeat : Choose Default, No-repeat, Repeat, Repeat-x, or Repeat-y.
Size : Choose Default, Auto, Cover, Contain, or Custom.
Width : Set a custom background image width when Size is set to Custom.

Gradient

Color: Set the first gradient color.
Location: Set where the first color is positioned in the gradient.
Second Color: Set the second gradient color.
Location: Set where the second color is positioned in the gradient.
Type: Choose Linear or Radial.
Angle: Set the direction of a Linear gradient.
Position: Set the origin of a Radial gradient, such as Center Center, Top Left, or Bottom Right.

Body, Wrapper, and Content

Creative Elements provides three separate site background targets so you can control different layers of the PrestaShop page structure.

Body: Sets the background of the overall page.
Wrapper: Sets the background of the PrestaShop #wrapper area.
Content: Sets the background of the PrestaShop #content area.

Good to know: A background on an inner area can cover the background of the area behind it. For example, a Content background may visually cover the Body or Wrapper background within the Content area.

Classic background

The Classic background type can use a solid Color, an Image, or both. When a background image is selected, additional controls let you define how it is loaded, positioned, repeated, and scaled.

Position

Position controls where the image is anchored inside the background area. You can choose Center Center, Center Left, Center Right, Top Center, Top Left, Top Right, Bottom Center, Bottom Left, Bottom Right, or Custom.

When Custom is selected, responsive X Position and Y Position controls become available for precise placement.

Attachment

Attachment determines whether the background image scrolls with the page or remains fixed relative to the viewport. Available options are Default, Scroll, and Fixed.

Note: Fixed background attachment works only on desktop.

Repeat

Repeat determines whether the background image is tiled when it does not fill the available area. Choose Default, No-repeat, Repeat, Repeat-x, or Repeat-y.

Size

Size controls how the image fits within its background area.

Default: Uses the default background sizing behavior.
Auto: Uses the image's automatic background size.
Cover: Scales the image until the entire background area is covered. Parts of the image may be cropped.
Contain: Scales the image so the complete image fits inside the background area. Empty space may remain.
Custom: Lets you set the background image Width manually.

Tip: Cover is usually a good choice for decorative full-area backgrounds, while Contain is useful when displaying the entire image is more important than filling every part of the area.

Gradient background

The Gradient background type blends two colors. You can control both colors, their locations, and whether the gradient is Linear or Radial.

Color and Location: Set the first gradient color and where it appears along the gradient.
Second Color and Location: Set the second color and its position.
Linear: Creates a gradient along a straight line. Use Angle to control its direction.
Radial: Creates a gradient that radiates from a point. Use Position to choose the gradient origin.

Tip: Subtle gradients can add depth without competing with page content. For large site backgrounds, colors with a relatively small visual difference are often easier to use consistently.

Mobile Browser Background

Mobile Browser Background sets the site's theme-color meta value. Supported browsers and devices can use this color in parts of their browser interface.

Note: The theme-color meta tag is only available in browsers and devices that support it, so its visual effect can vary between platforms.

Using Global Colors

Background colors can be connected to Global Colors, allowing the site's larger background surfaces to remain part of the same reusable color system as other elements.

Tip: Consider creating reusable Global Colors for common surfaces such as the main page background, content surface, or contrasting sections. This makes future palette changes easier to manage.

Theme Style backgrounds and individual backgrounds

These settings establish site-wide defaults for the Body, Wrapper, and Content areas. Containers, widgets, templates, the active PrestaShop theme, and custom CSS can still apply their own backgrounds on top of these areas.

Important: If a Theme Style background is not visible, check whether an inner page element or the active theme applies an opaque background that covers it.

Recommended workflow

Set the Body background as the base page canvas.
Configure Wrapper only if the PrestaShop wrapper needs a separate background.
Configure Content when the main content area should differ from the surrounding page.
Choose Classic for solid colors or background images, or Gradient for a two-color blend.
When using images, review Position, Repeat, and Size on each responsive device.
Use Global Colors for recurring surface colors where appropriate.
Set Mobile Browser Background if you want supported mobile browsers to reflect the site's color scheme.
Check the storefront after changes to make sure theme or page-level backgrounds are not covering the intended result.