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.
From left sidebar menu, add a Box to your page.
With the Box selected, go to Background > Image & Overlay in the right sidebar.
Click Choose Image.
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.
Click Apply to insert the image into your page.
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
Overlay