Recently had need for a html/css/javascript full screen page single background image that filled the screen so matter the size or ratio.
Found a couple that seemed to work fine, here.
One css, and [URL=“http://css-tricks.com/examples/FullPageBackgroundImage/jquery.php”]one jQuery. Both worked pretty well.
The css one worked very well, but did not keep the ratio intact. Just filled the screen with no js.
The jQuery one worked very well, and kept the ration intact pretty well, tho I did notice it failed some of the time, depending on which ration was not equal.
I am not an expert with jQuery, but know good old javascript well enough, so proceeded to write it in that instead.
I discovered (yeah I know…is prolly old news to you, but new to me LOL) that if you check the aspect ratio in both directions, x and y, you get a better resizing of the background, with no stretching.
<script language="JavaScript" type="text/JavaScript">
<!--
window.onload = checkAvailableHeight;
window.onresize = checkAvailableHeight;
function checkAvailableHeight(){
var myBG = document.getElementById("bgHome");
var aspectRatio1 = myBG.clientWidth / myBG.clientHeight;
var aspectRationew1 = document.body.clientWidth / document.body.clientHeight;
var aspectRatio2 = myBG.clientHeight / myBG.clientWidth;
var aspectRationew2 = document.body.clientHeight / document.body.clientWidth;
var screenWmath = (document.body.clientWidth / 2);
var screenHmath = (document.body.clientHeight / 2);
if (aspectRationew2 <= aspectRatio2) {
myBG.style.width = document.body.clientWidth+"px";
myBG.style.height = "auto";
var bgmathH = (myBG.clientHeight/2);
myBG.style.left = 0+"px";
myBG.style.top = screenHmath - bgmathH +"px";
} else if (aspectRationew1 <= aspectRatio1) {
myBG.style.height = document.body.clientHeight+"px";
myBG.style.width = "auto";
var bgmathW = (myBG.clientWidth/2);
myBG.style.top = 0+"px";
myBG.style.left = screenWmath - bgmathW +"px";
}
}
//-->
</script>
Now this all works very well for our needs, but was wondering if this would run smoother in jQuery or some other language as the original was?
