[thelist] HOWTO: Stretch an image to fit the whole background

niklaus.haldimann at xmedia.ch niklaus.haldimann at xmedia.ch
Tue Apr 16 03:11:01 CDT 2002


This message is in MIME format. Since your mail reader does not understand
this format, some or all of this message may not be legible.
--
[ Picked text/plain from multipart/alternative ]
> From: Webtopia [mailto:webtopia at tpg.com.au]
> I need a solution to scale an image cover the entire browser
> background.
> I'll be using abstract images, so keeping it all to ratio is not an
> issue.  From what I've read, CSS3 and SVG will cover this,
> but as we're not there yet, what other options exist?

i can think of one hack. basically output an absolutely positioned layer
with the image dynamically (by means of JS) scaled to window dimensions.
output the content of the site in a second absolutelty positioned layer with
a higher z-index. this may break the layout of the content in some cases in
some browsers, but with a simple layout it may work well. this is untested,
but you get the idea:

<html>

<head>
<script type="text/javascript">
<!--
function winWidth() {
	if (self.innerWidth)
		return self.innerWidth;
	else if (document.documentElement &&
document.documentElement.clientWidth)
		return document.documentElement.clientWidth;
	else if (document.body)
		return document.body.clientWidth;
}
function winHeight() {
	if (self.innerHeight)
		return self.innerHeight;
	else if (document.documentElement &&
document.documentElement.clientHeight)
		return document.documentElement.clientHeight;
	else if (document.body)
		return document.body.clientHeight;
}
// -->
</script>
</head>

<body>

<div id="background" style="position: absolute; top: 0px; left: 0px"><script
type="text/javascript"><!--
if (winWidth() && winHeight()) { // this test necessary for browsers not
returning screen dimensions
	document.write('<img src="bgImage.gif" width="' + winWidth() + '"
height="' + winHeight() + '">');
}
// --></script></div>

<div id="content" style="position: absolute; top: 0px; left: 0px">
The rest of the page goes here.
</div>

</body>

</html>

cheers

--
Nik Haldimann
Web Developer, Xmedia
http://www.xmedia.ch




More information about the thelist mailing list