Hi I am newbie having issues with a javascript...

 

Background: I am designing an HTML greeter/login screen for MDM display manager on linux mint.

 

Problem: I am using a script to load a random image as the background for the login screen. The script does this perfectly well, however the image is displayed in its native resolution (massive) and is not scaling to fit the screen. My question is this; how do I format/style the images that are loaded by the script? Do I use CSS and if so, how?

 

This is my script (which is stored as an external .js file and loaded with a <script> tag in the main HTML file)

 

function changeImg(imgNumber) {
var myImages = ["bg/bg_1.jpg", "bg/bg_2.jpg", "bg/bg_3.jpg", "bg/bg_4.jpg", "bg/bg_5.jpg", "bg/bg_6.jpg", "bg/bg_7.jpg", "bg/bg_8.jpg", "bg/bg_9.jpg"];
var imgShown = document.body.style.backgroundImage;
var newImgNumber =Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
}

window.onload=changeImg();

CSS.

 

Firstly make sure the background images are no larger than 500kb each.

 

Size wise, depending on the image, 1600px should suffice in width.

 

Then:

body {
    background-position: 50% 50%;
    background-size: cover;
}

Be aware that background size cover is only supported down to IE9.

 

http://caniuse.com/#search=background-size

 

You can look at other solutions here: http://css-tricks.com/perfect-full-page-background-image/

Edited November 14, 201411 yr by CHEWX