FRAME TOOLS PRO GUIDE: BACKGROUND IMAGES


S03 | E06 | HOW TO MAKE A WEBSITE LIKE A PRO

Paul Davenport |  5 min read |  5 min video

NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW


Background images are perhaps one of the most striking features of the MOBLE visual editor. With the ability to apply a Background Image to every frame, it is incredibly straightforward for even a beginner to apply 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: Backgrounds.

Also consider that when you upload new images to MOBLE, MOBLE will automically compress the images for you to optimise the image size. For addtional help in sizing images please jump over to Series 4.


BACKGROUND IMAGE BROWSE UPLOAD


IMAGE URL:

YOUR WEBSITE: It's most common to 'Upload' new image to to your website, or 'Browse' to apply images that have already been uploaded. Once you have select an image, the Image URL field will show the location of the file in your website.

EXTERNAL WEBSITE: You may also paste in an image address for an image that exists anywhere on the web. This might be 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's important to remember two very important points:

  1. The image may be removed, or its 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/ license 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 in the display/

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 popup, 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

MOBLE CMS Background Image Upload



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.

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.

MOBLE CMS Background Left Centre

Background Position set the Left will focus the image to left on mobile devices.

MOBLE CMS Background Centre

Set the background image to the focus area of the image for a nice experience on all devices.

MOBLE CMS Background Position

Select the focus area of your background image by considering a mobile view port


BACKGROUND IMAGE FIT

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

COVER:

'Cover' is the most popular setting. This will stretch your image to fit the entire width of the Frame. It will cover the image automatically on devices. You can see 'Cover' in the example image above. When a background image is used in the 'Row. and set to 'Cover' this can instantly give your web pages a dramitc look.

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.


To demo the overflow effect you can see below that we've set the devices images to 'Contain' so the image overflows the page when you minimise the screen.

MOBLE CMS Default Image Fit Overflow

https://www.moble.com/story-dirtyfeet (Minimise the screen to see how the image overflows)


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 in the Background and is the most common setting.

MOBLE CMS Background No Repeat

Background Image set to No Repeat. Notice that no Background Fit is applied keeping the image at its true pixel width.


REPEAT X:

'Repeat X' will repeat the image horizontally from left to right. You can also use the 'Content Alignment' tool to determine if the first image is set to 'Left', 'Centre' or 'Right'.

MOBLE CMS Background Repeat X

Background Image repeating on the x-axis.


REPEAT Y:

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

MOBLE CMS Background Repeat Y

Background image repeating on the Y-Axis.


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

MOBLE CMS Background Repeat Both

Background image repeating on the both the X and Y Axis.

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

MOBLE CMS Background Repeat Both DirtyFeet

The Menu Drawer on DirtyFeet using a tiny 7px square image, set to 'Repeat Both' to create a tiled look.


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.

Notice the second image has Background Fixed turned on.

MOBLE CMS Background Image Fixed

LAUNCH


14 DAY FREE TRIAL

MINI


12 PAGES

PLUS


50 PAGES

PRO


500 PAGES

CUSTOM


UNLIMITED PAGES