Embed
Embed: preview
Embed size:
Maintain aspect ratio
Show steps
Embed code
Create a Collection
Update Collections
Create a
Collection
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.
Product: dominKnow | ONE | Version: 7.4
Applies to: Flow
Applies to: Flow
-
1Select the Title element on the stage.
Click the continue button:
-
2Select the icon for the Container Inspector.
Click the continue button:
-
3We want to apply the image as a background behind the entire Section. Select Section.
Click the continue button:
-
4In the Background options, select Image.
Click the continue button:
-
5The Media Background panel opens. Select Image.
Click the continue button:
-
6The Media Browser opens. Upload the image, if needed. Select the image Meeting_Two_People.
Click the continue button:
-
7Select Insert.
Click the continue button:
-
8The image will be shown in the preview area of the Media Background panel, and will be added to the page.
By default the first option under the Fit settings is selected. This setting keeps the image at its own aspect ratio but only allows it to expand based on its own maximum size. In some display uses, the image could actually not fill the whole space available in the section.
We want the image to be able to fit the Section but not distort its aspect ratio.
Select the third Fit setting to do this.
Click on The background image maintains its aspect ratio and fits its smallest dimension to the surface, causing the larger dimension to overflowClick the continue button:
-
9We'll leave the image set to the default Scroll option. We also want the background image to scroll at a different rate than the text content over top of it. Select the Parallax Slow option.
Click the continue button:
-
10Select the Container Inspector icon to close up its panels.
Click the continue button:
-
11You can see the image has been added as a background behind the text elements in the Section.
Click the continue button:











Comments ( 0 )
Sign in to join the discussion.