Anonymous, bureaucrat, administrator
7,528
edits
Changes
From All n One's bxp software Wixi
no edit summary
= 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.
= How = == For the User level ==
== For the System level ==
== Secure Background Images ==
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]]
