GET STARTED QUICKLY WITH A FREE DESIGN, THEN COMPLETELY CUSTOMISE IT TO MAKE IT YOUR OWN.
We help you make beautiful websites. Manage websites, little or large, in moments with a powerfully simple Visual Editor.
STYLE 70 MIX 'N MATCH THEMES WITH YOUR BRAND
THE WEB'S LARGEST COLLECTION OF LAYOUTS
ALL THIS FROM ONLY $9 PER MONTH!
TOUR THE CMS & WEBSITE BUILDER
WHAT'S NEW: MERGING INSTORE & ONLINE
BUILD YOUR OWN CUSTOM WEBSITE DESIGN
ON DEMAND LIVE EVENTS
WHAT'S THIS? IT'S A GLOSSARY OF FEATURES
HOW TO MAKE A WEBSITE LIKE A PRO
Web School is an end-to-end, easy to follow series, aimed at both beginners and web design pros.
2020 EVENTS ANNOUNCING SOON
Spend the day at MOBLE offices in Surry Hills and build your own website with the help from our team.
Learn MOBLE as you go with this comprehensive glossary of features and FAQs.
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.
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 Pexels, Unsplash, or Negative Space.
If using images from an external website it's important to remember two very important points:
Once you have selected an image, a preview of the image will appear in the display/
You can upload new images to your website from your computer. Once uploaded the image will be stored in your 'Files' area.
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:
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.
Background Position set the Left will focus the image to left on mobile devices.
Set the background image to the focus area of the image for a nice experience on all devices.
Select the focus area of your background image by considering a mobile view port
Background Image Fit lets you control how your background image fits across all screen sizes.
'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' 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:
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.
https://www.moble.com/story-dirtyfeet (Minimise the screen to see how the image overflows)
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' will simply show one instance of the image in the Background and is the most common setting.
Background Image set to No Repeat. Notice that no Background Fit is applied keeping the image at its true pixel width.
'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'.
Background Image repeating on the x-axis.
'Repeat Y' will repeat the image vertically from top to bottom.
Background image repeating on the Y-Axis.
'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'.
Background image repeating on the both the X and Y Axis.
'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'.
The Menu Drawer on DirtyFeet using a tiny 7px square image, set to 'Repeat Both' to create a tiled look.
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.
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.
Design a website in under 3 minutes!
GET A QUOTE
A Web Builder for Design. A CMS for Business. We serve all businesses from SME's to Enterprise. Talk with us for custom website design and website development, ecommerce websites, directories, intranets and social networks.