Цель данного урока рассмотреть способы организации фонового изображения для веб сайта, которое будет всегда растягиваться на все окно браузера. Подобный урок уже приводился на сайте RUSELLER.COM. Но с того момента прошло время и наступила пора обновить и расширить список используемых методов. Вот требования к решению: Заполнять изображением всю страницу без пробелов. Масштабировать изображение, если нужно. Сохранять пропорции изображения. Изображение центрируется на странице. Изображение не создает никаких полос прокрутки. Кросс-браузерное решение по возможности. Не использовать никаких сторонних технологий, например, Flash. sourse Удивительный, простой и прогрессивный метод CSS3 Задача легко решается с помощью CSS3 благодаря ставшему доступным свойству background-size. Мы используем элемент html (лучше, чем body, так как он всегда имеет, по крайней мере, высоту окна браузера). Устанавливаем фиксированные и центрированный фон для него, а затем настраиваем размер с помощью присваивания свойству background-size ключевого слова cover. 1 html { 2 background: url(images/bg.jpg) no-repeat center center fixed; 3 -webkit-background-size: cover; 4 -moz-background-size: cover; 5 -o-background-size: cover; 6 background-size: cover; 7 } Работает в: Safari 3+ Chrome IE 9+ Opera 10+ (Opera 9.5 поддерживает свойство background-size, но без ключевых слов) Firefox 3.6+ Смотрим демонстрацию использования CSS3. Техника с использованием только CSS. Часть #1. Используем строчный элемент <img>, размеры которого можно менять в любом браузере. Устанавливаем свойство min-height, чтобы заполнить окно браузера вертикально, а свойству width присваиваем значение 100% для заполнения по горизонтали. Также устанавливаем свойство min-width равным ширине изображения, чтобы никогда оно не уменьшалось. Хитрый ход заключается в использовании медиа запроса для проверки того, что ширина окна браузера меньше ширины изображения, и использование комбинации процентного значения свойства left и отрицательного значения для левого поля, чтобы центрировать фоновое изображение. Вот код CSS: 01 img.bg { 02 /* Устанавливаем правила для заполнения фоном */ 03 min-height: 100%; 04 min-width: 1024px; 05 06 /* Устанавливаем коэффициент пропорциональности */ 07 width: 100%; 08 height: auto; 09 10 /* Устанавливаем позиционирование */ 11 position: fixed; 12 top: 0; 13 left: 0; 14 } 15 16 @media screen and (max-width: 1024px) { /* Определяется свое для каждого конкретного изображения */ 17 img.bg { 18 left: 50%; 19 margin-left: -512px; /* 50% */ 20 } 21 } Работает в: Любой версии нормального браузера: Safari / Chrome / Opera / Firefox. IE 6: Не работает - но можно использовать какой-нибудь из трюков для позиционирования. IE 7/8: В большинстве случаев работает, не центрирует маленькие изображения, но заполняет экран правильно. IE 9: Работает. Смотрим демонстрацию использования CSS. Часть 1. Техника с использованием только CSS. Часть #2. Другой способ решить задачу - поместить строчный элемент <img> на странице, зафиксировать его положение в левом верхнем углу и установить значение 100% для его свойств min-width и min-height, сохраняя коэффициент пропорциональности. 1 <img src="images/bg.jpg" id="bg" alt=""> 01 #bg { 02 03 position:fixed; 04 05 top:0; 06 07 left:0; 08 09 10 11 /* Сохраняем коэффициент пропорциональности */ 12 13 min-width:100%; 14 15 min-height:100%; 16 17 } Однако так изображение не центрируется. Поэтому обернем изображение в элемент <div>. Данный <div> будет иметь ширину в два раза больше окна браузера. Изображение, помещенное в него, будет сохранять пропорции и полностью покрывать окно браузера, размещаясь точно в центре. 1 <div id="bg"> 2 3 <img src="images/bg.jpg" alt=""> 4 5 </div> 01 #bg { 02 position:fixed; 03 top:-50%; 04 left:-50%; 05 width:200%; 06 height:200%; 07 } 08 09 #bg img { 10 position:absolute; 11 top:0; 12 left:0; 13 right:0; 14 bottom:0; 15 margin:auto; 16 min-width:50%; 17 min-height:50%; 18 } Работает в: Safari / Chrome / Firefox (не тестировалось на всех версиях, но в последних работает прекрасно). IE 8+. Opera (любая версия) и IE отказываются работать с данным способом (неправильное позиционирование изображения). Смотрим демонстрацию использования CSS. Часть 2. Используем jQuery Идея очень проста, если коэффициент пропорциональности изображения (строчный элемент <img> будет использоваться как фон) сопоставляется с коэффициентом пропорциональности окна браузера. Если для изображения он меньше, то нужно присвоить только свойству изображения width значение 100%, и оно будет заполнять экран и по высоте и по ширине. А если больше, то присвоить только свойству изображения height значение 100%. 1 <img src="images/bg.jpg" id="bg" alt=""> 1 #bg { position: fixed; top: 0; left: 0; } 2 .bgwidth { width: 100%; } 3 .bgheight { height: 100%; } 01 $(function() { 02 03 var theWindow = $(window), 04 $bg = $("#bg"), 05 aspectRatio = $bg.width() / $bg.height(); 06 07 function resizeBg() { 08 09 if ( (theWindow.width() / theWindow.height()) < aspectRatio ) { 10 11 $bg 12 .removeClass() 13 .addClass('bgheight'); 14 15 } else { 16 17 $bg 18 .removeClass() 19 .addClass('bgwidth'); 20 } 21 } 22 23 theWindow.resize(function() { 24 25 resizeBg(); 26 27 }).trigger("resize"); 28 29 }); Работает в: IE7+ (с заглушками, вероятно, будет работать и в IE6) Во всех остальных браузерах. Смотрим демонстрацию метода с использованием jQuery. Заключение Любой из методов решения имеет свои достоинства и недостатки. Нужно просто выбрать подходящее для конкретного случая. Ну, или предложить свое. В качестве бонуса предлагается еще одна демонстрация работы с фоном при использовании таблицы.