Difference between revisions of "Background Image"

From All n One's bxp software Wixi

Jump to: navigation, search
(Created page with "BE 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. ...")
 
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
BE 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.
+
= Overview =
  
  
−
= For the User level =
+
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.
  
  
−
Main Menu > I Want To > Change My Details > Interface Options
+
 
 +
= How =
 +
 
 +
 
 +
== For the User level ==
 +
 
 +
 
 +
''Main Menu > I Want To > Change My Details > Interface Options''
  
  
Line 14: Line 21:
  
  
−
= For the System level =
+
== For the System level ==
  
  
−
Main Menu > System Access Management > System Management > System Settings > Interface Options
+
''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.
 
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.
 +
 +
 +
 +
== 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 https://ww3.allnone.ie/client/client_demo/custom/yourimage.png  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.
 +
 +
 +
 +
= 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
 +
{{#ev:youtube|https://www.youtube.com/watch?v=m8c1CAT2zEI}}
 +
 +
 +
Screen resolution, pixel density and aspect ratio explained
 +
{{#ev:youtube|https://www.youtube.com/watch?v=e31lizl1D2Y}}
 +
 +
 +
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
 +
 +
 +
<syntaxhighlight lang="javascript">
 +
<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>
 +
</syntaxhighlight>
 +
 +
 +
 +
[[Category:Topic:bxp Interface]]

Latest revision as of 11:10, 22 September 2015

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 yourimage.png 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>
Retrieved from ‘https://www.bxpsoftware.com/wixi/index.php?title=Background_Image&oldid=5414’