okay det der først sker er at vi laver et par div bokse .. #body_bg og #new_body.
#body_bg indeholder baggrundsbilledet som et faktisk billede og ikke som baggrundsbillede.
#new_body kommer til at indeholde alt det indhold du eller bare ville have lagt lige efter body.
--- body
<div id="body_bg"><img id="body_bg_img" alt="" src="bg.jpg" /></div>
<div id="new_body">bodys indhold!!</div>
--- /body
Med stylen placerer vi vores 2 div-bokse i det top-venstre hjørne af skærmen.
#new_body bliver gjort 100% høj og 100% bred og får tilføjet scroll - overflow:auto;
body får fjernet sin scroll - overflow:hidden;
--- style
body {margin:0;overflow:hidden;}
#body_bg {position:absolute;top:0;left:0;}
#new_body {position:absolute;top:0;left:0;width:100%;height:100%;overflow:auto;}
--- /style
Nu bar vi det sådan set bare som et normalt baggrunsbillede i top venstre hjørne.
Det der sker i JS er at vi justerer billedets bredte og højde alt efter hvor stort browservinduet er, det gøres med funktionen resize_bg() - læs mere inde i koden.
window.onload - starter når siden bliver hentet - Sætter to attributter we og he i vores billede. we="[BILLEDETS BREDTE i 1:1]" og he="[BILLEDETS HØJDE i 1:1]".
Der efter starter vi også resize_bg();
Nede i window.onresize - køres hver gang browseren resizes - starter vi også resize_bg().
Kig ved function resize_bg();
--- JS
window.onload=function(){
document.getElementById("body_bg_img").setAttribute("we",document.getElementById("body_bg_img").offsetWidth);
document.getElementById("body_bg_img").setAttribute("he",document.getElementById("body_bg_img").offsetHeight);
makeSureResize = false;
resize_bg();
}
window.onresize=function(){
if(makeSureResize) clearInterval(makeSureResize);
makeSureResize=setInterval("resize_bg()",100);
}
function resize_bg() {
// FØRST FINDER VI VORES BILLEDE
element = document.getElementById("body_bg_img");
// SÅ FINDER VI BROWSERENS HØJDE OG BREDTE
if (document.all) {
bw = document.body.clientWidth;
bh = document.body.clientHeight;
} else {
bw = window.innerWidth;
bh = window.innerHeight;
}
// FINDER BILLEDETS HØJDE OG BREDTE I 1:1 UD FRA VORES TIDLIGERE ATTRIBUTTER we OG he
iw = element.getAttribute("we");
ih = element.getAttribute("he");
// HER DESINERER VI FORHOLDET MELLEM BILLEDETs OG BROWSERENs HØJDE OG BREDTE
bwh = bw/bh;
iwh = iw/ih;
// NU SKER DER DET AT VI FINDER UD AF OM BILLEDET SKAL SKALERES TIL AT PASSE I HØJDEN ELLER BREDTEN SÅ VI UNDGÅR NOGET HVIDT PÅ SKÆRMEN
if (bwh>iwh) { // BREDTEN SKAL PASSE OG HØJDEN GÅR LIDT UD OVER.
element.width=bw; // BREDTE
element.height=element.getAttribute("he")*(bw/iw); // HØJDE. udregning HØJDE1:1*(BROWSER BREDTE/BILLEDE BREDTE);
} else { // HØJDEN SKAL PASSE OG BREDTEN GÅR LIDT UD OVER.
element.width=element.getAttribute("we")*(bh/ih); // BREDTE
element.height=bh; // HØJDE
}
// TILSIDST RYKKER VI BILLEDET TILSVARERENDE OP OG TIL VENSTRE SÅ DET CENTRERES:
document.getElementById("body_bg").style.left=0-(element.offsetWidth-bw)/2+"px";// udregning: (BILLEDE ny bredte)-(BROWSER BREDTE)/2
document.getElementById("body_bg").style.top=0-(element.offsetHeight-bh)/2+"px";// udregning: (BILLEDE ny højde)-(BROWSER HØJDE)/2
}
--- / JS
