Flipbox backgrounds control the surface behind each side of a card. Ultimate Flipbox and Post Flipbox expose a Background Type control for the front and back sides, with Simple, Gradient, and Image choices. Story Flipbox has separate Front Background Color and Back Background Color controls in its container styling.
Ultimate Flipbox → Style → Container Box Settings → Front Background
- Open Elementor Editor.
- Select the Ultimate Flipbox widget.
- Open the Style tab.
- Open Container Box Settings.
- Select the Front tab.
- Locate Background Type.
- Choose Simple, Gradient, or Image.
- If Simple is selected, adjust Background Color.
- If Image is selected, configure Background Image.
- If Gradient is selected, use the conditional gradient controls described in the gradient guide.
Ultimate Flipbox → Style → Container Box Settings → Back Background
- Open Elementor Editor.
- Select the Ultimate Flipbox widget.
- Open the Style tab.
- Open Container Box Settings.
- Select the Back tab.
- Locate Background Type.
- Choose Simple, Gradient, or Image.
- If Simple is selected, adjust Background Color.
- If Image is selected, configure Background Image.
- If Gradient is selected, use the conditional gradient controls described in the gradient guide.
- Preview the front side.
- Preview the back side.
- Click Update to save the page.
Post Flipbox → Style → Container Box Settings → Front/Back Background
- Open Elementor Editor.
- Select the Post Flipbox widget.
- Open the Style tab.
- Open Container Box Settings.
- Select the Front tab.
- Locate Featured Image if the card should use the post’s featured image.
- When Featured Image is off, use the separate Background Image control if you need a different image.
- Locate Background Type.
- Set Background Type to Simple, Gradient, or Image.
- Select the Back tab.
- Configure the back-side Background Type and its conditional controls.
- Click Update to save the page.
Story Flipbox → Style → Container Box Settings → Front/Back Background Color
- Open Elementor Editor.
- Select the Story Flipbox widget.
- Open the Style tab.
- Open Container Box Settings.
- Select the Front tab.
- Adjust Front Background Color.
- Select the Back tab.
- Adjust Back Background Color.
- The reviewed version 2.1.7 source registers Front Background Color and Back Background Color.
- It does not register the same Background Type choices used by Ultimate Flipbox and Post Flipbox.
- Click Update to save the page.
Preview Front/Back Backgrounds and Click Update
- Open Elementor Editor.
- Select the Ultimate Flipbox widget.
- Preview the front background.
- Preview the back background.
- Check text contrast against the background.
- Check icon contrast against the background.
- Check button contrast against the background.
- Click Update to save the page.
Set the card background
- Select the widget and open its Style controls.
- For Ultimate Flipbox or Post Flipbox, find the front or back container settings and choose the required Background Type.
- For a simple background, adjust Background Color. For an image background, use the relevant image control; Post Flipbox also exposes a Featured Image switch for the front image background.
- Repeat for the other side if you want the front and back to have different treatments.
Check readability
Preview the actual text, icon, and button against each background. Images with busy details can reduce contrast; use the overlay controls when they are available, or choose a simpler color or image. The available background controls differ by widget, so do not expect every label to appear in Story Flipbox.
For gradient settings, see Apply Background Gradients. For image overlays, see Configure Flipbox Overlays.
Screenshot to add: the selected widget’s front and back background controls, including the available background type or color setting. This is a placeholder, not an existing screenshot.
Return to Presets, Styling, and Responsive Layouts for the complete styling and responsive-layout guide.