Image Backgrounds
The FG Funnels funnel and website builder allows you to use image backgrounds for your funnels and websites. You can include image backgrounds in section, rows, columns.
In This Article:
How To Enable An Image Background in a Section
If you are looking for a video background, see the article Video Background.
Image Options
These image options allow you to control how the image background is displayed within a section, row, or column. These options determine how/if the video is scaled or cropped to fit the available space. Here's an explanation of each option with an image showing an example of a waterfall video with the specified option selected.
Full Center (Parallax):
Full center places as much of the image as possible in view without distorting the image. The center of the image is aligned with the center of the container. Depending on the size and proportion of the image as compared to the container, some of the sides, top and bottom may be cut off. With the parallax option, when you scroll up and down, the rest of the page appears to scroll on top of the background image while it moves very slowly.
Full Center:
Full center places as much of the image as possible in view without distorting the image. The center of the image is aligned with the center of the container.Depending on the size and proportion of the image as compared to the container, some of the sides, top and bottom may be cut off.
Fill 100% Width:
Fill 100% width will make the width of the image the same as the width of the container and show the top of the photo and showing as much height as is proportional. This retains the photo's proportion.
Fill 100% Width and Height:
Fill 100% width and height ensures that the entire photo is showing. However, in order to do this and fill the entire container, the photo loses it's proportions. This can make the photo feel smushed or crunched and out of proportion.
No Repeat:
If the image dimensions are smaller than the container dimensions, the no repeat setting will ensure that the photo shows once entirely starting in the top left corner of the container. The rest of the container will not be filled with an image, just with the background color.
Repeat:
If the image dimensions are smaller than the container dimensions, the repeat setting will repeat the photo both horizontally and vertically, ensuring that the entire space is filled with the photo repeating.
Repeat Horizontally:
If the image dimensions are smaller than the container dimensions, the repeat horizontally setting will repeat the photo horizontally across the container starting at the top. The top of the container will have the photo repeated as many times as needed to fill the space horizontally. The photo will not repeat below so the rest of the vertical space will be the background color.
Repeat Vertically:
If the image dimensions are smaller than the container dimensions, the repeat vertically setting will repeat the photo vertically across the container starting at the top left. The left side of the container will have the photo repeated as many times as needed to fill the space to the bottom. The photo will not repeat below so the rest of the horizontal space will be the background color.
Repeat Horizontally, Fix to Bottom:
If the image dimensions are smaller than the container dimensions, the repeat horizontally, fix to bottom setting will repeat the photo horizontally across the container and always ensure that the bottom of the photo is visible.
Repeat Horizontally, Fix to Top:
If the image dimensions are smaller than the container dimensions, the repeat horizontally, fix to top setting will repeat the photo horizontally across the container and always ensure that the top of the photo is visible.
Background Opacity
Background opacity specifies how much light, color, or content behind the image should be visible. There is a description of each option and an example image of an image background with a yellow color behind it. The yellow will become more visible as we increase the fade.
None:
When "None" is selected or applied, it means there is no background opacity or transparency. The background is fully opaque, completely blocking any content or elements behind it. This option is useful when you want the background to be solid and fully visible, without any elements behind it showing through.
Light Fade:
"Light Fade" introduces a subtle level of transparency to the background. It makes the background slightly see-through, allowing the content, color or elements behind it to show through, though the background remains largely visible. This effect is often used to create a delicate, soft, or understated background that complements the content without overpowering it.
Half Fade:
"Half Fade" implies that the background is partially transparent, with a 50% opacity level. This means that the content, color or elements behind the background are clearly visible but still somewhat obscured by the background. "Half Fade" can be used to strike a balance between a prominent background and the content, offering a moderate level of visual separation.
Heavy Fade:
"Heavy Fade" involves a significant level of transparency, with the background being almost see-through. The content, color or elements behind the background are prominently visible, and the background serves as a subtle backdrop rather than a dominant feature. This option is often chosen when you want to de-emphasize the background and prioritize the content or elements it overlays.
