CHOOSE FROM 40 FREE DESIGNS
SUBMIT YOUR OWN DESIGN & RECEIVE A 40% PER MONTH ROYALTY
Select your free website design, then completely make it your own with our easy to use website builder and CMS.
WEB SHOP
Typical things we get asked to build:
CUSTOM WEBSITE DESIGN
ECOMMERCE BUILDS
CUSTOM HEADERS
VIRTUAL VENUES
SMS/WHATSAPP NOTICATIONS
CHAT BOTS
STORE LOCATORS
CUSTOM PAYMENT SYSTEMS
CUSTOM DIRECTORIES
CUSTOM PLATFORMS
CUSTOM DEVELOPMENT
INTERNET OF THINGS
WEB QUOTE
Get a Quote on any custom bits you need.
REPUTATION EDGE
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 Pexels, Unsplash, or Negative Space.
If using images from an external website it's important to remember two very important points:
- 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.
- 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
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.
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:
'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.
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:
'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:
'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:
'Repeat Y' will repeat the image vertically from top to bottom.
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'.
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'.
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.
FREE
PLAY BEFORE
YOU PAY
MINI
12
PAGES
PLUS
50
PAGES
PRO
500
PAGES
CUSTOM
UNLIMITED
PAGES
PARTNERS & INTEGRATIONS
Connect your website to our ever growing community of friends...
Play before
you Pay?
Design a website in under 3 minutes!
GETTING AROUND
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.