FRAME TOOLS PRO GUIDE: BACKGROUND IMAGES

Background images are perhaps the most striking features of the MOBLE visual editor. With the ability to apply a Background Image to every frame, it is incredibly straight forward for even a beginner to create and add background images to create beautiful web pages.

This Episode covers the features of Background Images with the frame tool. Though, in addition, don't forget that you can apply 'Overlay' colours and 'Gradient' colours over the top of your Background Images to enhance text legibility. We covered those feature in the previous Episode, Frame Tools Pro Guide for Backgrounds.

Also, see Series 3, Episode 6. Top Tips for Sizing and Uploading Website Images, includes some essential tips and tricks for sizing and uploading images. Be sure to check out the video in that Episode.

As for adding images to your frame backgrounds, let's dive in...


Background Image Browse & Upload

IMAGE URL:

The Background Image URL serves two functions:

  1. To display the image name and location of images that you have uploaded to your website
  2. To allow you to paste and display the image name and location of an image that exists on an external website


YOUR WEBSITE:

You can use the 'Browse' and 'Upload' tools to choose an image that you have already uploaded. Or, you may upload a new image from your computer. Once you have selected the image, the image URL will display.

EXTERNAL WEBSITE:

You may paste in an image address for an image that exists anywhere on the web. This might be from from your local company share drive, or other company cloud storage services, such as Google Drive, Dropbox or Box. It may also be from a free stock library website such as PexelsUnsplash, or Negative Space.


If using images from an external website it important to remember two very important points:

  1. The image may be removed, or it's address may change. If so, your image will no longer display on your website. Therefore, it might be better to download the image, size it, then upload it to your website.
  2. If using images located on external websites, you need to ensure that you have the rights/licence to do so. Always check the terms and conditions of all websites where you link from and also contact the website owner if you are unsure. It is important that you adhere to the legal requirements set by the image owner at all times.

 

IMAGE DISPLAY:

Once you have selected an image, a preview of the image will appear.

UPLOAD IMAGE:

You can upload new images to your website from your computer. Once uploaded the image will be stored in your 'Files' area.

BROWSE IMAGE:

You can browse images that already exist in your 'Files' area. Click 'Browse' and a popup will appear allowing you to search your image library.

Using the search bar at the top of the pop up, you can search images by:

  • Keyword - Any word within the image name
  • Tag - Any Tag that is assigned to the image
  • Dimensions - Any width or height of an image. E.g. type '1440' to only show images that are 1440px wide

Background Image Position

Background Image Position allows you to chose the focus point of an image. This is particularly important when considering how your background image might render across all devices.

EXAMPLE:

You have a landscape image of a field of sunflowers. On the left-hand side in the foreground is a prominent sunflower. The full image will display on desktop perfectly, though background image position is perhaps best initially explained when we consider how the image will behave on a mobile phone in portrait position:

  • If the Background Image Position is set to 'Centre Left', then on mobile the prominent sunflower will show on the phone (as the prominent sunflower is on the left)
  • If the Background Image Position is set to 'Centre Right', then on mobile the prominent sunflower will not show on the phone (as the prominent sunflower is on the left)


In the same example, the image is 1440px wide and 810px high, yet the height of the row is only 500px on desktop. If the image is set to 'Centre Left', the height of the image will be in the 'Centre' and therefore the top and the bottom of the image will appear to be cropped on desktop (i.e. 310px from the top and the bottom of the image will not show).

In the image, the head of the prominent sunflower is positioned towards the top. You can now adjust the vertical position of the image as follows:

  • If the Background Image Position is set to 'Top Left', then the image will fix to the top of the row, and on the head of the prominent sunflower will show.
  • If the Background Image Position is set to 'Bottom Left', then the image will fix to the bottom of the row, and on the stem of the prominent sunflower will show.

TIP:

It is therefore always a good idea to set your Background Image Position by focusing on the part of the image that is most relevant, or, the part that looks the best with text on top of it.


Background Image Fit

Background Image Fit lets you control how your background image fits across all screen sizes.


COVER:

'Cover' is the default setting that automatically adjusts your image so that it aligns to be full width on every device and screen size. 

'Cover' is most frequently used in the outer row to present a 'full bleed' image that sits nicely in the background of your Row. However, you may use this effect within Blocks or absolutely any location where you wish to show a background image.

This tool provides extreme flexibility, limited only to your design creativity. However, if you are not a designer, keep it simple, choose a great image and your website will look beautiful in an instant.

CONTAIN:

'Contain' is a neat effect that presents your image at it true dimensions. For creatives, this provides an opportunity to express yourself in various ways. Some common uses are:

  • Overflow effect: Allow your image to flow off the page (or even off the Block) where it is placed. E.g. You upload a 1500px image in a left-hand block, if the device screen is less than 1500px, the image will spill over the page to the right.
  • Fixed: Fix a small image behind the text. E.g. You may have a small (let's say 200px by 200px) transparent png of a speech bubble that sits behind a customer quote. You might position the image Top Left. The speech bubble will be contained in the top left, creating an awesome look behind your custom quote.

Background Image Repeat

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

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 '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.

NO REPEAT:

'No Repeat' will simply show one instance of the image. This is often used in combination with 'Background Image Fit' set to 'Contain'.

REPEAT X:

'Repeat X' will repeat the image horizontally from left to right. This is often used in combination with 'Background Image Fit' set to 'Contain', when the image is shorter than the row width. You can also 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. This is often used in combination with 'Background Image Fit' set to 'Contain', when the image is shorter than the row height. The first image will be aligned from the top.

REPEAT BOTH:

'Repeat Both' will repeat the image both horizontally from left to right and vertically from top to bottom. This is often used in combination with 'Background Image Fit' set to 'Contain', when the image is shorter than the row width and height. You can also use the 'Content Alignment' tool to determine if the first image is set to 'Left', 'Centre' or 'Right'.

TIP:

'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 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'.


Background Image Fixed

You can choose to fix an image in the background. When you scroll, the background image position will remain still, the foreground text, plus the neighbouring rows, will scroll over the background image.

PARALLAX SCROLLING

The effect is similar to parallax scrolling, where background images move slower than foreground text, plus rows above and below. This creates an illusion of depth and motion on a 2D canvas.