Thumbnail Background Center
SiteOrigin Background Feature
The SiteOrigin Background feature vastly improves the current background implementation within Page Builder. Supports background image sizing, blending, positioning and responsive control.
Adjustable background image size.
15 background blend modes.
Responsive background control.
Easy positioning and tiling.
Background Colors
Using a color from your global Background settings is available with the Color option. This can save you time when styling multiple areas of your website. If you intend to blend the background color with an image a color from here or Design is required.
TEXT WIDGET WITH SECONDARY COLOR
TEXT WIDGET WITH PRIMARY COLOR
Background Images
Widgets, rows and cells can have background images set via their Background Style Menu options. When setting background images consider using a different size to the full version of the image.
TEXT WIDGET BACKGROUND IMAGE
Size Option
Background images can be sized via the Cover or Contain CSS properties. Alternatively leaving the option bank will disable sizing.
TEXT WIDGET BACKGROUND COVER
Background Positioning
Background images can be positioned using 9 different pre-defined positions. Positioning backgrounds is handled by the Position Option.
TOP LEFT
TOP CENTER
TOP RIGHT
CENTER LEFT
CENTER CENTER
CENTER RIGHT
BOTTOM LEFT
BOTTOM CENTER
BOTTOM RIGHT
Background Repeat
By default background images will repeat on the vertical and horizontal axis. The Repeat Option is used to disable this behaviour.
CENTER CENTER
CENTER CENTER
Fixed Backgrounds
Backgrounds can be fixed in position using the Attachment Option.
TEXT WIDGET BACKGROUND IMAGE
Responsive Visibility
Using mobile first priority background images can be disabled for smaller screens via the Responsive Option
ABOVE MEDIUM SCREENS ONLY