Using a Container Element for a background image

Using a Container Element for a background image

The Container Element keeps its minimum height consistent across all device sizes, ensuring your store looks stable no matter what device your visitors use.

However, when you add a background image to a container, you may notice that the image looks cut off at different screen sizes. For example, on larger screens, the bottom part of an image—like the base of a glass—may not appear.

This happens because containers in Reactive use the same minimum height across all screens. While this maintains consistency, it can limit true responsiveness for background images.


To add a background image:

  1. Go to Background > Image & Overlay in the right sidebar.

  2. Click Choose Image.

Background Image Settings

Image fit options:

  • Cover: Fills the box while maintaining aspect ratio (may crop edges).

  • Contain: Fits the image fully inside the box (may leave empty space).

  • Auto: Automatically adjusts width and height.

Repeat image options:

  • Uniform: Repeats the image both horizontally and vertically until the entire box is filled.

  • Horizontal: Repeats the image only across the horizontal axis.

  • Vertical: Repeats the image only across the vertical axis.

  • No repeat: Displays the image once with no repetition.


Image movement

  1. Scroll: The background image moves as the visitor scrolls the page.
  1. Fixed: The background image stays in place while the content scrolls over it.

​
Overlay

  1. Overlay: Adds a semi-transparent layer over the background image.
  1. Overlay color: Lets you choose the color of the overlay to improve readability of text placed on top.


    • Related Articles

    • How to add images using the Image Element

      Adding images to your Reactive pages is simple with the Image Element, which you can find in the Elements library on the left side of the editor. Uploading a New Image in Reactive To upload and place an image: Drag and drop the Image Element onto ...

    • How to create a product element

      Reactive allows you to add products into your content. You have full control over which products display, and how they are presented. To create a product element, navigate to the Pages section from the sidebar menu of your admin panel under Website. ...

    • How to use the Box Element to style and structure page sections

      The Box element is a flexible tool for organizing your page layout, structuring sections, and creating overlays with image or video backgrounds. Adding Boxes to Your Page Boxes are simple to use: From left sidebar menu. Drag and drop the Box element ...

    • Adding text with the Text Element

      The Text Element allows you to add text content right into your page. The Text Element is one of the most powerful elements that Reactive has to offer. It’s one of the most used elements within Reactive! To get started, drag one onto your page. How ...

    • Create scrolling sections with the Slider Element

      The Slider Element is a powerful tool for creating scrolling sections of content on your pages. Each slide is its own container, so you can add and customize elements freely. A common use is building image slideshows to showcase products. Slides per ...