The Background Image feature allows you to apply a background image to the widget container by clicking on the checkered rectangle, and then either selecting an existing image from your image library or uploading a new one. Clicking on the little gear icon will allow you to set various background coverage properties (Fig 1). 


Fig 1

Each of the four options (Size, Position, Repeat, and Parallax) have drop-down menus with several options.


Size

  • Auto - Image retains its native size and aspect ratio while being cropped to fit within the widget container. This does not work well with images where the image's native dimensions are significantly larger or smaller than the widget container dimensions.
  • Contain - The entire image will be displayed in its native aspect ratio. Depending on the image's size, the widget container background may be visible behind the image. 
  • Cover - The image fills the whole widget container background via scaling. This can crop the image. 


Position  


The image is placed in the Position you want inside the widget container dimensions where the first value represents the vertical alignment and the second value represents the horizontal alignment. Center center is the default value. 

  • Top left
  • Top center
  • Top right
  • Center left
  • Center center
  • Center right
  • Bottom left
  • Bottom center
  • Bottom right


The Repeat option has four possible values. No-repeat is the default value. 


  • No-repeat - Image is only shown once within the widget container. 
  • Repeat - Image will be repeated along the x- and y-axis based on the other background image property settings and the native size of the image.
  • Repeat-x - Image will be repeated along the x- axis only based on the other background image property settings and the native size of the image.
  • Repeat-y - Image will be repeated along the y- axis only based on the other background image property settings and the native size of the image.


The Parallax option has two values. None is the default.

  • None (and Reset) - The background image will scroll with the normal flow of the landing page when rendered in the browser.
  • Fixed - The background image will be fixed on the browser viewscreen as the rest of the landing page is scrolled.

The Shadow feature provides you with the ability to add a shadow effect to the Widget (Fig 2). Clicking on the "+" icon to the right will bring up the control sub-menu.

Fig 1

  • Inset - Moves the shadow effect from outside the widget container (the default) to the inside.
  • Checkered rectangle - Brings up the color picker, allowing you to set the color of the shadow effect. The default color is a medium gray.

The four input fields to the right of the checkered rectangle represent four separate shadow effects:

  • X - Set the shadow's distance it will extend from the Widget container on the x-axis. Negative values are allowed.
  • Y - Set the shadow's distance it will extend from the widget container on the y-axis. Negative values are allowed.
  • Blur - Set the shadow's blur effect.
  • Spread - Set the shadow's spread effect.

The Style menu includes several features. For more information, read the relevant article: 



Note: Not all features covered in this article may be available for a particular widget. In addition, certain Style features may have different defaults (on, off, etc.) for different widgets.