Фоновая картинка на весь экран

Бывает, что нужно расположить какую-нибудь красивую фотку на фон всей страницы, чтобы было красиво. Или наоборот, у кого на что хватает :-)

Так вот, основная трудность заключается в том, что размер экрана везде очень разный, а мы с вами, во-первых, хотим показать картинку всю целиком, а, во-торых, хотим ее расположить так, чтобы случайным образом браузер ее не замостил по всему экрану в нескольких экземплярах. Т.е., в первом случае может оказаться, что картинка больше, чем видимая область экрана, а во втором — наоборот. А нам же хочется, чтобы эти параметры совпадали.

Итак, поговорим о размерах экрана и о том, что он, оказывается, тоже имеет значение. Для начала, представьте себе, что сайты смотрят люди с разным разрешением экрана: 1024х768, 1280х1024, 800х600, 1280х600 и так далее, смотря у кого какие мониторы. Представили? Отлично. Теперь сюда же плюсуем и разные браузеры, размер рабочей области которых порой может довольно ощутимо отличаться. Скажем, в Интернет-эксплорере обзор окна довольно средний, в Опере поменьше, в Файерфоксе, опять же, почти, но не совсем, такой же, как в эксплорере. А в Хроме совсем другой, больше. Плюс Сафари. Во всех этих браузерах размер видимой области разный. А если еще взять пользователей, которые смотрят сайты в полноэкранном режиме? 

Я все это подвожу к одной мысли: создать пакет разных графических файлов под все случаи жизни не получится. Мы еще не все операционные системы с вами учли ;-)

Итак, большой размер исходного кода и мегабайты картинок — это не для нас.  Хотя, конечно, несколько файлов создать придется. 

Мы будем изменять размер картинки относительно ширины видимой области окна браузера. И рисовать картинку с этими размерами. Естесственно, лучше картинку уменьшать, чем увеличивать, поэтому для основных разрешений экрана лучше создать отдельные картинки. Ну это если вы, конечно, хотите качественный фон.

Ширина клиентской области вычисляется так:

function getClientWidth() {
   return document.compatMode=='CSS1Compat' && !window.opera?
   document.documentElement.clientWidth:document.body.clientWidth;
}

Соответсвенно, нам остается только вычислить высоту, используя простое пропорциональное соотношение сторон и нарисовать картинку, используя JavaScript:

<script language="JavaScript">
    document.write( '<img src="img.gif" width="' + w + '" height="' + h + '" />' );
</script>

Есть небольшая тонкость: в Файерфоксе и Хроме размер видимой области вычисляется, учитывая размеры полос прокруток, поэтому в этих браузерах для начала от полученного значения ширины придется отнять ширину полосы прокрутки окна. 

Ну и, конечно, по традиции все статьи по JavaScript должны заканчиваться фразой: "К сожалению, у этого метода есть один недостаток — он не будет работать в браузере с отключенным JavaScript". А достоинства, я думаю, и так видно.