Stretching Background

Dieses Script ist für alle gedacht, die Hintergrund-Bilder für die
Webseite benutzen. Dieses Script passt die Bilder an die Größe
der Webseite an. Kleinere Bilder werden gestretcht.

Das in der Demo verwendete Bild ist eigentlich nicht für
Webseite geeignet, dient aber auch nur zur Demonstration.

Bei scrollen bleibt der Hintergrund an der gleichen Stelle.

Klicke hier, um ein Beispiel zu sehen. Es öffnet sich ein kleines Fenster.

HTML-Einbindung
   <SCRIPT> //--------------------------------------------------------------// // Full Window (stretched) Watermarked Background Image v1.0.1. // //--------------------------------------------------------------// // // // Copyright (C) 2002 QCS Systems Inc. // // // // This JavaScript can be used with permission as long as // // this message stays here in the header of the script. Any // // modifications and bug fixes are appreciated. // // // // Author : D.J.Oepkes // // Date : 05/14/2002 // // Email : joepkes@qcssystems.com // // // //--------------------------------------------------------------// // Modifications // //--------------------------------------------------------------// // 05/24/2002 D.J.Oepkes, Hiding sheets until places to make // // moving between pages less visible // //--------------------------------------------------------------// //--------------------------------------------------------------// // These are the only variables you need to set // //--------------------------------------------------------------// var imgBackground = "winter19800.jpg"; // URL of image var intRefresh = 10; // refresh rate if image gets out of scrollarea. var intPreload = 1000; // time to wait before loading background image. var strAlignment = "center"; // choose from center | left | right //--------------------------------------------------------------// // Preload background image, this needs to be done for IE6+ to // // prevent white border, but also helps when it needs to be // // displayed. // //--------------------------------------------------------------// if (document.images) { imgPreload = new Image(); imgPreload.src = imgBackground; } </SCRIPT> <DIV ID="body" style="Z-INDEX: 1; POSITION: absolute; VISIBILITY: hidden;"> <CENTER> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <font face="Arial"><b>HIER kommt Dein Text hinein !!!!!!!!!!!!</b></font> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </CENTER> </DIV> <DIV ID="watermark" STYLE="Z-INDEX: -1; POSITION: relative; VISIBILITY: hidden;"> <TABLE HEIGHT="100%" WIDTH="100%" cellSpacing=0 cellPadding=0 border=0> <TR> <TD> <IMG ID="background" height="100%" src="" width="100%"> </TD> </TR> </TABLE> </DIV> <SCRIPT> //--------------------------------------------------------------// // SetBackground // //--------------------------------------------------------------// // Image can't be loaded while table is building up because IE5 // // probably uses image info to render a table & that spoils the // // stretchiness if window gets smaller then original image size // // and you can change the image anytime you want too!!! // //--------------------------------------------------------------// function setBackground(image) { document.all.background.src=image; } setTimeout("setBackground('"+imgBackground+"')",intPreload); //--------------------------------------------------------------// // Watermark // //--------------------------------------------------------------// // Since we're not using standard background but an image we // // need to watermark the image in order to keep it in place if // // page needs to be scrolled. While we are here, make sure the // // body gets realigned as well. // //--------------------------------------------------------------// function watermark() { // Keep image onto viewable area document.all.watermark.style.top = document.body.scrollTop; document.all.watermark.style.left = document.body.scrollLeft; // Place body according alignment settings if (document.body.clientWidth>document.all.body.clientWidth) { if (strAlignment=="center") document.all.body.style.left = (document.body.clientWidth/2)-(document.all.body.clientWidth/2); if (strAlignment=="left") document.all.body.style.left = document.body.scrollLeft; if (strAlignment=="right") document.all.body.style.left = document.body.scrollLeft+document.body.clientWidth-document.all.body.clientWidth; } // Make visibile once changed to make moving between pages less visible document.all.body.style.visibility = ""; document.all.watermark.style.visibility = ""; } setInterval("watermark()",intRefresh); </SCRIPT>

Hier kannst Du Dir das Javascript einfach per eMail zusenden lassen.

Mail:

Name:

Abo
Wenn Du den Newsletter beziehen möchtest, klicke bitte in das Feld "Abo"