Using a Box Element for a background image

Using a Box Element for a background image

The Box 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 box, 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 boxes 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. From left sidebar menu, add a Box to your page.

  2. With the Box selected, go to Background > Image & Overlay in the right sidebar.

  3. Click Choose Image.

  4. ​In the Media Library that opens, you can either upload a new image or select an existing image you have already uploaded to use as a background.

  5. ​Click Apply to insert the image into your page.

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 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 ...

    • 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 ...

    • Building Forms with the Form Box Element

      The Form Box allows you to build custom forms using form blocks to add the fields you need. Forms are an effective way to receive messages and collect emails from your customers and visitors. Reactive's Forms Core Elements Reactive Forms consist of ...

    • How to overlay content on a Box

      Use the Box Element to create a background and then place text, buttons, or any other elements on top of it. The Box Element offers a variety of useful features, including the ability to set a minimum height, add a background, and insert multiple ...

    • 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. ...