Replace an Image used as a Section Background

A very dramatic responsive design idea is to use an image as the background behind a section.

If you add a parallax effect, as the user scrolls down the page the background image and the content over it will scroll at different speeds. This creates a sense of depth.

This lesson outlines the steps to add an image background to a Section on the Flow page and set it to a slow parallax effect.

A very dramatic responsive design idea is to use an image as the background behind a section.

If you add a parallax effect, as the user scrolls down the page the background image and the content over it will scroll at different speeds. This creates a sense of depth.

This lesson outlines the steps to add an image background to a Section on the Flow page and set it to a slow parallax effect.

Steps to change the background fill color on a Section in a Flow Page.

For this lesson the page has a Decorative Header section added to the top of the Page from from the Add Your First Section options on a blank page plus a second section added below that.

You can set a background fill color on any Section on a Flow page using these same steps.

Adding a background image to a Section on a Flow page is a great design idea. But images are often very complex visually and it can be hard to read text over them.

One way to help the text be more readable is to add a background color with a transparency setting to the text. The background helps the text stand out against the image while the transparency means the image can still be seen behind the text, providing an effect of added depth to your page.

In this lesson we’ll add a transparen...

Tips for controlling the display and design of Image Banner, Image & Text and Image & Motion sections

Steps to insert an Image within a Text Element.

The text will wrap around the image, much like adding an image within a Word document.

Steps to adjust the display height of a Section on a Flow page as well as set how the Section's content will align vertically within the Section's display height.

Steps to set a background (fill) color on an element.

Setting a background color can be used for many visual effects.

In this example, we have a text element over an image and it's difficult to read the text.

We can add a background or fill color to help the text stand out more.

Giving the background color a slight transparency allows the image to still be seen through the text element, which can be an interesting visual design effect.

Steps to add a Hotspot to an image.

You can add hotspots as a layer over an image. If you move the image the hotspot will remain in the same location in relation to the image.

Once you have added a hotspot you can use it as a trigger for a wide range of Triggers and Actions such as showing or hiding content.

Steps to add a Marker within an Image.

You can add the following elements within an Image: Label, Marker, Hotspot, Image, Speech Bubbles, and Icons.