Landing Page Background Images

Informz Landing Pages support background images so that you can further customize the look and feel of your design. You’ll find the Page Background heading on the Style Flyout Menu. Here, you’ll have all the tools you need to apply a background image. Let’s learn how.

Steps

Click the Style Flyout Menu and open the Page Background heading.

Click the Use Image dropdown list and select Yes – Upload a Background.

Click Open Asset Manager. Here, you’ll select from your available Asset Manager images or upload a new one.

Click to select the image you wish to use as your background.

Click Insert.

Your background image now appears behind your landing page content.

Image Options

Uploading a background image is easy, but you’ll probably want to modify some of the page’s properties to ensure that you get the exact look you want.

From the Style Flyout Menu, you can make three sizing choices by clicking the Size dropdown list:

  • Cover: Your browser covers the full background with the image, cutting off parts that do not fit in the browser window. Note that this is the most ideal option because it prevents any rendering issues when your landing page loads.
  • Auto: This option displays the background image at its uploaded size. You can also use Repeat options.
  • Contain: With this option, your browser attempts to display the full image at least once. Additionally, you can use Repeat options.

As above, two sizing choices allow you to repeat your background. You can select from the following options:

  • Repeat: The image repeats horizontally and vertically. This is sometimes called “tiling,” and works best with smaller images.
  • Repeat-X: The image repeats horizontally only.
  • Repeat-Y: The image repeats vertically only.
  • No Repeat: The image does not repeat and displays at its uploaded size.

Important Design Considerations

Remember that your Landing Page (background included!) projects your organization’s image to your subscribers. Therefore, make sure that you consider a few things in your design process:

  • Modern monitors are usually set to a resolution of 1920 x 1080. Try to make sure that your image isn’t much larger. If so, it may take a few seconds to load on some devices. Also, note that using the Cover option might cause your image to become blurry or pixelated.
  • Always keep in mind that your background image is applied to both your Desktop and your Mobile versions!
  • Try to keep your image’s file size somewhere between 500 and 600 KB. Image editors can help you balance your file size and image quality.

Always Remember…

Content is king, and the main focus of your landing page should always be the content. Try not to get too caught up making your background image perfect. Sometimes a smaller image that helps your landing page load quickly or prevents distraction is ideal. Remember that you can always “tile” smaller images, too, for aesthetic effect.