BACKGROUND IMAGE REPEAT

Background Image Repeat lets you repeat your image either horizontally across the 'X' axis, or vertically across the 'Y' access.

MOBLE CMS Background Image Repeat

  D03 E02    06:39

Embed v Background Images - Fixed Height

A common query for first timers is knowing when to use an embed image v's a background image. Background Images are most commonly used when you want to apply text on top of an image, here we choose a background image so that a Fixed Height can be applied to your Frame.

NO REPEAT:

'No Repeat' will simply show one instance of your image.

No Repeat is often used in combination with 'Background Image Fit':

  • With 'Cover', your image with be full width and will not repeat Vertically.
  • With 'Contain', your image with be full height and will not repeat Horizontally.

REPEAT X:

'Repeat X' will repeat the image horizontally from left to right.

You can use the 'Content Alignment' tool to determine if the first image is set to 'Left', 'Centre' or 'Right'.

REPEAT Y:

'Repeat Y' will repeat the image vertically from top to bottom.

You can use the 'Content Alignment' tool to determine if the first image is set to the top or the bottom.

REPEAT BOTH:

'Repeat Both' will repeat the image both horizontally from left to right, and vertically from top to bottom. This create a tiled look, and was used a lot in the early day of the internet to stitch skeuomorphic backgrounds such as woodgrains and patterns.

DESIGNER TIPS:

ONE
Create a Tiled look
Repeat Both' can create a tiled look and therefore looks great with a small shape. A great tip is to use a small transparent .png file and use background colour to create a tiled look with your brand colours in the background. You may then use a 'Background Overlay' to ensure that your text is legible on top of the tiles. You may try this technique with 'Repeat X' and 'Repeat Y'.

TWO
Most Frequently Asked Troubleshooting
For 'Background Image Repeat' to work effectively, in most cases, your image must be shorter than the row width or height. For this reason 'Background Image Repeat' is most frequently used when the 'Background Image Fit' is set to either 'Off' or 'Contain'. If 'Background Image Fit' is set to cover, you will not see your image repeat on the 'X' axis since the image will cover the entire width.