First considered for selecting a 2nd style sheet with appropriately sized
background image based on viewport detect.
This method rather than CSS stretch to avoid rubbery pixelated jpeg
stretching by the browser as it will be a sharp focused photo.
Principle; Entire picture does not have to show on a shrunk window, just be
able to fill it when maximised, and prime central content visible when
window is at a 'typical' 75%.
After the above concept I just wondered briefly whether viewport detect -
meets - CSS was something done elsewhere.
Told not, thread cut.
There is one value which is too variable: that is the maximized
height. With numerous native and added (say Google bar) toolbars,
where each can be shown or hidden in most different combinations: you
may spend the rest of your life by making pixel-exact pictures for
each possible situation
I would suggest to go for a small(?)
compromise by making right and bottom sides of your background
smoothly fading to some color. Based on the sample at
http://www.websitefoundry.co.uk/
that could be some variation of orange. By setting the background-
color to the same color you will avoid white bars on screen in any
given case. So CSS could be:
<style type="text/css">
body {
/* Default image for the most expected situation.
What is "most expected" is of course up to you
to decide. The image is faded from the right
and from the bottom to the bgcolor:
*/
background-image: url(1024x740.jpg);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed; /* or not */
background-color: orange; /* or whatever else */
}
</style>
Now we have something even if JS is disabled. If it is not then you
may make some runtime fine-tune:
<script type="text/javascript">
/* A list of all available bg images
mapped by their width:
*/
var bgrImages = {
'1024' : '1024x740.jpg',
'1100' : 'X1xY1.jpg',
'1500' : 'X2xY2.jpg'
};
if ((window.screen)&&(window.screen.availWidth)) {
var w = window.screen.availWidth;
/* var h = window.screen.availHeight; */
if (bgrImages[w]) {
document.body.style.backgroundImage = 'url(' + bgrImages[w] + ')';
}
}
</script>
