# Making a background image fit multiple resolutions



## V0lt (Sep 14, 2002)

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 (Sep 4, 2004)

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.


----------



## V0lt (Sep 14, 2002)

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 (Sep 4, 2004)

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


```
<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.


----------



## V0lt (Sep 14, 2002)

Thanks, will test it out tomorrow.


----------

