* Some settings require refreshing the page to see the updated changes. After setting color overlays, the effect may be doubled, a page refresh will correct the doubling.
After you drag the block into an area, a block form will pop up with the controls for the block. While in edit mode, there will be an Edit Background Image and Overlay button visible. This button is not visible outside of edit mode and is only used to access the block form.
The image you select will be used as the background image for the page.
Responsive Image Scaling
Responsive image scaling will proportionally scale the background image according to the width of the page. The goal is to deliver smaller images to mobile devices and faster page loads.
- If the page is equal to or greater than 1000px wide the image is scaled to a maximum 1600px in width.
- If the page is between 701px and 999px wide the image is scaled to a maximum 1300px in width.
- If the page is less than or equal to 700px wide the image is scaled to a maximum 1000px in width.
Background Image Focal Point
An optional focal point can be set using the CSS background-position property. This will allow the focal point of an image to stay visible in different screen sizes. Without a focal point set, the center of the image is the focal point. The first value of the background-position is the X percentage and the second value is the Y percentage.
Use the FocusPoint Helper Tool to get the background-position values for your focal point.
FocusPoint Helper Tool
Background Overlay Color
The selected RBGA color will be layered on top of the background image. The slider under the color palette controls the transparency. Selecting an overlay color is optional. Included with the block are an assortmet of overlay color presets.
Fallback Overlay Color
Older browsers do not support RGBA colors. A fallback option is provided using semi-transparent PNG files.
Background Fallback Color
The placement of the background image relies on CSS that is not supported, or improperly implemented, on older mobile browsers. For these browsers, a fallback color can be chosen to be displayed instead of the image.
Override Elemental Theme Styling
Override the default Elemental theme CSS styling that blocks the proper viewing of full screen background images.
Background Overlay Color presets
In this example an image has been selected and a sepia overlay color and sepia fallback overlay color have been chosen.
In the next example, only an image is selected. The wine glass is intended to be the focus of the image. By default, the center of the image will be kept in focus. At smaller page widths, the wine glass will begin to leave the page view.
By setting the background image focal point, the wine glass can be kept centered at smaller page widths.
Version 0.9.8 adds an image vignette effect using an inset box shadow. Older browsers that do not support the CSS box-shadow "inset" keyword will ignore the box-shadow property.