Running Time: 02m 51s

 

This video shows you how to apply a different background image for mobile / desktop size devices.

 

NB Click on  in the bottom right of the video to view fullscreen.

 

 

About this video

This video assumes you are already logged into the Sketchanet editor. If you don't know how to do this, you can find out how here. 

 

When you create a background image setting, you can create multiple layers, each with it's own image. This setting can then be applied to any container in your website such as a cell, a section, the content area, or the background to your whole site.

 

While this multiple layer feature can be used for artistic effects, it can also be used to assign a different image to be displayed on a mobile phone than on a larger device.

 

One important reason you might want to do this is to make your page faster to load on a mobile device. A large, high quality, full screen background image might be as much as 1Mb in filesize. On a decent internet connection this isn't a big problem but on a mobile over 3G this will take some time to load. It might be better to use a different image for a mobile device (or no image). By using a tile for mobile you could bring the filesize down to 50Kb for example.

 

To achieve this with Sketchanet you can simply create two layers within your background setting. You assign one to display only on desktop and the other to display only on mobile. Each layer can have it's own settings such as size, repeat, position, etc.

 

Watch the video above to see exactly how this is done.