Text Over Image

A parallax image with a text area that can be placed left or right on wider screens and centers itself at screen widths below the break point.

Widgets

Text Over Image

The parallax text/image widget has an overlay with a grid layout and two columns. The text can be placed in the left or right column when viewed on browser/device screen widths above the break point .Below the break point the list is centered.
Images
The images are load in the background and are inserted in three sizes - large, medium and small. The images used in the example were cropped to 1200px x 720px, 800px x 480px and 375 × 667px.
Note how the small image has been cropped to a portrait aspect ratio for better performance on mobile phones in portrait mode.

Text Over Image

A parallax image with a text area that can be placed left or right on wider screens and centers itself at screen widths below the break point.

Widgets

Text Over Split Image

The large image used in the above parallax image was created in Keynote. The image was cropped to 600px x 720px and dropped onto a slide in Keynote.
A placeholder image was cropped out of a black slide with tthe same dimensions as the first image.
Both images were placed side by side on a slide and cropped out at 1200px x 720px to created the large background image.
Images
The medium image is the original one that was cropped to 600px x 720px and the small image for displayimg on mobile phones in landscape mode was cropped out of this with a 9:16 aspect ratio.

Overlay

The overlay has a background color control with an opacity slider and has a grid alyout. An HTML5 <article> element is centered horizontally and vertically over the image and has a maximum width setting.
Article
The article has a heading and text and an optional link. These items have a control for spacing them out vertically.
The font can be web safe or Google hosted with a web safe fallback. The heading has controls for font size, mobile size and text align.
The text has controls for font size, mobile size color, text align and line height
The optional link can have a border with controls for border width and radius. The border color is inherited from the font color and the hover color from the link text's hover color.Container
The <article> element has its own controls for background color and opacity. There are controls for setting a border and/or a box shadow.