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
00:00 Select the Title element on the stage.
00:04 Select the icon for the Container Inspector.
00:08 We want to apply the image as a background behind the entire Section.
Select Section.
00:12 In the Background options, select Image.
00:16 The Media Background panel opens.
Select Image.
00:20 The Media Browser opens.
Upload the image, if needed.
Select the image Meeting_Two_People.
00:24 Select Insert.
00:28 The 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 overflow
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 overflow
00:32 We'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.
00:36 Select the Container Inspector icon to close up its panels.
00:40 You can see the image has been added as a background behind the text elements in the Section.
Comments ( 0 )
Sign in to join the discussion.