A background gradient or image with the content floating over it can have a very dramatic effect and provide an illusion of depth. EverWeb can'tinsert a gradient browser background and the BIG problem with using an image is the sheer size of the file which is way too big to download on mobile devices.
CSS gives us the way to use a background image without driving mobile visitors away with poor page download time. Mobile visitors are an impatient bunch. The viewport items must download and create an impression on less than two seconds or they will leave.
Image Insert
The best approach is to forget about the traditional method of stretching an image to cover the browser background and to find a way to avoid Javascript.
The background can be fixed and set to fill the width and height of the viewport rather than the browser.
Instead of using one large image file, different size images for the various devices can be inserted. There are two methods for this …
[1] Insert the images in the background an use media queries to download the appropriate size for the visitor's device.
[2] Use the HTML5 <picture> element to insert the various images. This is the best method. It has an important advantage over the background image method in that it allows the insertion of alt text for the search engines and screen readers.
The ThemeKit Stage widget can insert a gradient background or an image. The gradient has two colors with adjustable opacity and color stop. There is an option to switch the background gradient from liner to radial.
Image
Checking a box switches the function to an image background. The widget can insert three images. The images used in the demo were sized to 1000 x 100px, 600 x 600px and a 9:16 aspect ratio image at 375 x 667px for phones in landscape mode before importing into EverWeb.
There is a control for setting a fallback color with opacity slider in case the background image doesn't load for any reason.
Follow the link below to see an example of the widget …
A background auto slider is about the worst idea in web design! It greatly increases page download time and sucks the life out of mobile device batteries.
Stage Banner
The ThemeKit Stage Banner widget overcomes these problems by inserting each image in three sizes as described further up the page and using CSS rather than battery burning Javascript to create the slide transitions.
The banner can have up to twelve slides and the images have the all important alt text attribute for the search engines.
The number of slides is entered and the display time for each slide is set in seconds.
There is a control for setting a fallback color with opacity slider in case the background image doesn't load for any reason.
The ThemeKit Gradient Navigation widget use on this page is a full size overlay with the links arranged vertically. When there are too many links for the size of the device's viewport, the overflow will scroll.
The navigation can indicate the current page and the gradient background has opacity sliders.
