1 Overview

bxp facilitates the placing of a custom background image on every page. This can be done at a system level or at a user level. The user level will override the system level. This allows each user to tailor the system as they would like.

2 How

2.1 For the User level

Main Menu > I Want To > Change My Details > Interface Options

In the background image box you can put the full URL to an image you want to have.

Alternately the system has some custom backgrounds read to use already. Simply type a number between 1 and 30 and your background will change to that image.

2.2 For the System level

Main Menu > System Access Management > System Management > System Settings > Interface Options

As per the User level, simply enter the URL of the image to be used for all users if they have not set a custom background, or the numbered background option.

2.3 Secure Background Images

Some browsers require all the content on the page to be secure. One easy way of ensuring that even the background image is secure is to upload the image into your instance of bxp.

Create / Locate your image. The backgrounds will need to be in gif, jpg or png format.

Upload the file through the Custom File Uploader

Main Menu > System Access Management > System Management > Customer Folder - File Upload > Locate and upload your file

When the upload is complete you will be presented back in text the URL of where that file can be accessed from. Usually along the lines of Copy this URL completely and paste it into your account. See For the User Level above. If you're happy with it, then you could apply it at system level.

3 Screen Technology Information

When choosing a background image it is important to think about resolution. Resolution is linked to your devices screen.

What is a pixel

Screen resolution, pixel density and aspect ratio explained

When deciding on an image for a background, there is a challenge to deciding which image resolution to use.

Designing an image that will work most effectively is done through experimentation.

With current technology start with a resolution image of 1920x1080, which is a 16x9 aspect ratio. So it will work with wide screens.

Next position your imaging slightly indented on the image and test on a 4:3 ratio resolution, eg. 12840x1024.

The precision of the design is a challenge for numerous designers. bxp currently stretches the background image to best fill the screen using the "cover" capability and allowing your browser to choose how best to do this.

There are technological ways of being able to dynamically change the background image based on the resolution of the users machine but this means a lot of homework and lots of versions of your background.

A good reference article is http://www.w3schools.com/jsref/prop_screen_width.asp

<SCRIPT language="JavaScript">
if ((screen.width=1024) && (screen.height=768)) {
	document.body.style.backgroundImage = "url('43image.png')";
}
else {
	document.body.style.backgroundImage = "url('169image.png')";
}
</SCRIPT>

Background Image

Contents