Making a background image fit multiple resolutions

**Fox** · 02-13-2005, 07:43 PM

Hi guys,

This has been driving me nuts for as long as I can remember. I would like to know how to make a background image stretch to fit higher resolutions and shrink to fit lower resolutions. Does anyone know how to do this? Or even know of a website that works this way?

**shuuhen** · 02-13-2005, 10:48 PM

You could probably use JavaScript or PHP to check what the resolution of the screen is, then use variables to control what the image is scaled to when they see it.

Here's how to detect screen size with JavaScript.

PHP would probably be a better solution. I think you use the $_GET['width'] and $_GET['height'] variables to get the screen size.

**Fox** · 02-14-2005, 01:14 PM

Any idea how to implement either of these things so that they'll work with my page?

Like for the javascript...could I use those values as variables, and have different resolutions of that picture available on the server depending on what it returns?

PHP's an option too...I just don't know enough to make either of these options happen on my own.

Thanks a lot

**shuuhen** · 02-14-2005, 07:44 PM

This should work if you are ok with having a different copy of the image for each resolution.

Code:

<html>

<head>
<title>Resolution dependent background</title>
</head>

<body>
<script language="javascript">
if (screen.width >= 800 && screen.width < 1024)
{
        document.body.style.background="url('jscript_test.jpg')"
}
if (screen.width >= 800 && screen.width < 1024)
{
        document.body.style.background="url('jscript_test2.jpg')"
}
</script>
<p>Just to see if text works
</p>
</body>

</html>

I tested it with Firefox 0.10.1 on Yellow Dog Linux, Firefox 1.0 on Win98SE and IE 6 on Win98SE. All three combinations seemed to work fine.

**Fox** · 02-14-2005, 07:57 PM

Thanks, will test it out tomorrow.

02-13-2005, 07:43 PM	#1 (permalink)
Fox TSF Enthusiast Join Date: Sep 2002 Location: NJ Posts: 7,752 OS: XP Pro, CentOS My System	Making a background image fit multiple resolutions Hi guys, This has been driving me nuts for as long as I can remember. I would like to know how to make a background image stretch to fit higher resolutions and shrink to fit lower resolutions. Does anyone know how to do this? Or even know of a website that works this way?

02-14-2005, 07:44 PM	#4 (permalink)
shuuhen Moderator Join Date: Sep 2004 Location: Colorado Posts: 761 OS: Mac OS 9.1, Mac OS X 10.5.5, WinXP Pro, FreeBSD 6.0, Gentoo Linux	This should work if you are ok with having a different copy of the image for each resolution. Code: <html> <head> <title>Resolution dependent background</title> </head> <body> <script language="javascript"> if (screen.width >= 800 && screen.width < 1024) { document.body.style.background="url('jscript_test.jpg')" } if (screen.width >= 800 && screen.width < 1024) { document.body.style.background="url('jscript_test2.jpg')" } </script> <p>Just to see if text works </p> </body> </html> I tested it with Firefox 0.10.1 on Yellow Dog Linux, Firefox 1.0 on Win98SE and IE 6 on Win98SE. All three combinations seemed to work fine.

02-13-2005, 10:48 PM	#2 (permalink)
shuuhen Moderator Join Date: Sep 2004 Location: Colorado Posts: 761 OS: Mac OS 9.1, Mac OS X 10.5.5, WinXP Pro, FreeBSD 6.0, Gentoo Linux	You could probably use JavaScript or PHP to check what the resolution of the screen is, then use variables to control what the image is scaled to when they see it. Here's how to detect screen size with JavaScript. PHP would probably be a better solution. I think you use the $_GET['width'] and $_GET['height'] variables to get the screen size.

02-14-2005, 01:14 PM	#3 (permalink)
Fox TSF Enthusiast Join Date: Sep 2002 Location: NJ Posts: 7,752 OS: XP Pro, CentOS My System	Any idea how to implement either of these things so that they'll work with my page? Like for the javascript...could I use those values as variables, and have different resolutions of that picture available on the server depending on what it returns? PHP's an option too...I just don't know enough to make either of these options happen on my own. Thanks a lot

02-14-2005, 07:57 PM	#5 (permalink)
Fox TSF Enthusiast Join Date: Sep 2002 Location: NJ Posts: 7,752 OS: XP Pro, CentOS My System	Thanks, will test it out tomorrow.