The Background Image Repeat and how you can use it to design your landing page

After you have defined your landing page's structure using the various Containers, you can also start adding Elements to each available slot, filling the structure with content. Each Container you use comes with its own fully customizable group of Container settings. One of the most useful options contained in the settings is the Background Image Repeat option.

Let's see what it does:

1. Click on the Settings symbol, appearing on the right side of the Container when you place your mouse over it.background_image_repeat_2.png

Make sure that you have already uploaded an image as a background for the particular Container, using the Background Image to upload a file from your computer, or pick one from the internet using any of the various sources available. If no image has been uploaded as a background for the Container, then there is no way to take advantage of the Background Image Repeat and so it won't appear as an option on this particular Container's Settings.

2. Click on the Background Image Repeat drop-down menu, located on the left side of your Landing Page Designer page.background_image_repeat_3.png

You have the following options:

  • no-repeat
    Removes any tiling of the image you uploaded, keeping one instance of the image. This is the default option.

  • repeat-y
    Tiles the image on the vertical (Y) axis of the row.

  • repeat-x
    Tiles the image on the horizontal (X) axis of the row.

  • repeat
    Tiles the image on both the vertical (Y) and horizontal (X) axes of the row.

  • Full width
    The image is expanded to take up the entire space available within the Container.

3. Choose the repeat option.

The image you have uploaded should fill up the row's background.

Now that you are familiar with how the background image of a row can be changed and filled up quickly, you are no longer limited to just background colors. Take advantage of your new tools to tweak your design and make it look just perfect.