Forum Moderators: phranque
2 considerations - does the image need to expand, maintaining it's ratio, example: a photo? Then you may need to develope seperate images and serve seperate pages via a screen size sniffer script.
The other option is to create an image that displays well when tiled (repeated.) Usually .gif, .png or .bmp files work best. Then set the image in the body and as the body conforms to different screen resolutions, so will the background.
It depends on what technique you wish to use. You can do it the old fashion way and reference the image file in the <body> tag, example:
<body link="#XXXXXX" vlink="#XXXXXX" background="background.gif">
But most people now follow the new standard of separating the page style, using CSS.
<body link="#XXXXXX" vlink="#XXXXXX" style="background:#XXXXXX url(http://www.your-site.com/background.gif);">
This CSS code may be placed in the <head> section:
<style>
body {
background:#XXXXXX url(http://www.your-site.com/background.gif);
color:#000;
top:0;
left:0;
margin:0;
padding:0;
}
</style>
Alternatively, the above code may be place in an external CSS file and linked to from the <head> section (in which case the style tags are not needed.)
<link rel="stylesheet" type="text/css" href="/style.css">
Since background images can be large and take a bit of time to load, it's recommended to precede the image with a similar color that loads very quickly and achieves the look you want.
