Page Builder 
Widgets Bundle 
SiteOrigin CSS 
Installer Retina Background Images
Retina Background Images adds a second, high-resolution background image to Page Builder rows, columns and widgets. The browser picks one by the pixel density of the screen. Standard (1x) screens load the standard Background Image. High-density (2x) screens, such as Retina displays, load the high-resolution image. The addon uses the CSS image-set() function.
Requirements
Go to SiteOriginPremium Addons and activate Retina Background Images.
Add a Retina Background Image
The addon adds its settings to the Design group of the Page Builder style settings.
- Row: open the row’s settings menu and choose Edit Row. Open Row Styles > Design.
- Column: in the Edit Row dialog, click a column in the row preview. Open Design in the column’s styles, for example Column 2 Styles.
- Widget: open the widget to edit it. Open Widget Styles > Design.
- Choose a Background Image from the Media Library. This is the image for standard screens.
- Set Background Image Display and the other Page Builder background settings as usual.
- The Retina Background Image field shows. Choose the high-resolution image from the Media Library. Use an image twice the width and height of the standard image.
- Save the layout.
Retina Background Image
The image for high-density screens. It shows only after you set a Background Image, because the addon needs both images.
Retina Background Image Size
This setting has no effect at the moment. Both images load at the size set in Background Image Size. Set Background Image Size to Full so the retina image loads at full resolution.
Known Limits
- Use Media Library images for both fields. At the moment, the External URL field doesn’t work with this addon. Screens that should load an external image show no background image.
- Keep Background Image Opacity at 100. At the moment, a lower value is lost when a Retina Background Image is set, and the background shows at full strength.