|
|
Posted by Peterken on 12/11/05 23:24
"Toby Inkster" <usenet200512@tobyinkster.co.uk> wrote in message
news:0jfu63-rht.ln1@ophelia.g5n.co.uk...
> PJB wrote:
>
>> Is there a way to define the size of a page's background image
>> so it spans 100% of any screen?
>
> Not really. There will be in CSS 3, but that's still a long way off.
>
> It's possible to fake it with a little scripting though:
> http://examples.tobyinkster.co.uk/grad/grad
>
> --
> Toby A Inkster BSc (Hons) ARCS
> Contact Me ~ http://tobyinkster.co.uk/contact
There's another one going around, resizign and even creating form of "fixed"
background and working in IE and netscape (dunno for others):
Documented in the code below, a script is included in the <head> section
using
<!--including javascript for resize -->
<script language="JavaScript" type="text/javascript"
src="./scripts/backgrdresize_move.js"></script>
The actual script in the backgrdresize_move.js file
<!--
/* //------------------------------------------------------------
// Background Image WITH moving/resizing background
// Document Image resize
//-------------------------------------------------------------*/
/******** explanation
MUST create a layer with name "BGimglayer" between the <body> and </body>
tags AND set an onload="ImageOffset()"
MUST have the ID of the image to be "imageBG", is done in same part below
Example of layer code for body:
<body onload="ImageOffset()" background="./deep.jpg">
<!-- the part used for moving/resizing image background, somewhere in the
body section -->
<div style="position: absolute; width: 848px; height: 577px; z-index: -1;
left: 1px; top: 0px" id="BGimglayer">
<script type="text/javascript">
document.write('<img border="0" src=' + document.body.background + '
width="' + winWid + '" height="' + winHgt + '"' + 'id="imageBG">');
</script>
</div>
(-----rest of the page here------)
</body>
********* end explanation */
// vars holding window size
var winWid;
var winHgt;
function ImageOffset()
{
// check iexplore or netscape for image size
winWid = document.all ? document.body.clientWidth : innerWidth;
winHgt = document.all ? document.body.clientHeight : innerHeight;
// reducing a bit to avoid 'jumping' image
winWid = winWid - 3;
winHgt = winHgt - 3;
// move layer
if(document.all) // iexplore
{
document.all['BGimglayer'].style.posLeft = document.body.scrollLeft;
document.all['BGimglayer'].style.posTop = document.body.scrollTop;
}
else if(document.layers) // netscape
{
document.layers['BGimglayer'].pageX = window.pageXOffset;
document.layers['BGimglayer'].pageY = window.pageYOffset;
}
// resize layer
BGimglayer.width = winWid ;
BGimglayer.height = winHgt ;
// resize image
document.getElementById("imageBG").width=winWid;
document.getElementById("imageBG").height=winHgt;
window.onresize = ImageOffset;
setTimeout('ImageOffset()',100);
}
//-->
Navigation:
[Reply to this message]
|