Фон на всю страницу с помощью CSS

В сегодняшнем уроке Вы узнаете 2 техники по созданию фона на всю страницу.

Наш фон будет:
- заполнять полностью страницу (без белых полос)
- правильно масштабироваться
- соблюдать пропорции изображения
- центрирован на странице
- не содержать скроллов
- кроссбраузерным

Этого всего достичь очень трудно, поэтому нам придется немного попотеть и использовать множество разных техник для этого. Прежде всего, нам необходимо правильное масштабирование изображения. Традиционное background-image нам тут не поможет, и поэтому мы будем использовать инлайновое изображение.

Техника №1

Это изображение будет помещено на страницу в множество разных слоев. Каждый слой (блок) будет выполнять свою роль.

<div id="bg">
<div>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="images/bg.jpg" alt=""/>
</td>
</tr>
</table>
</div>
</div>

и стили:

* {
margin: 0;
padding: 0;
}
html, body, #bg, #bg table, #bg td {
 height:100%;
 width:100%;
 overflow:hidden;
 }
#bg div {
 height:200%;

 left:-50%;
 position:absolute;
 top:-50%;
 width:200%;
 }
#bg td {
 text-align:center;

 vertical-align:middle;
 }
#bg img {
 margin:0 auto;
 min-height:50%;
 min-width:50%;
 }

Получилось довольно много кода, но в конце мы получили хороший результат. После этого у нас будет идеальный фон, но нам же еще необходимо размещать контент на странице. Для этого нам понадобится еще один контейнер. Он будет находиться над фоном, иметь ширину и высоту на весь экран, и overflow auto (скроллы могут появиться). Внутри этого контейнера мы можем размещать контент.

<div id="cont">
<div class="box">
<!-- content in here -->
</div>
</div>
#cont {
position:absolute;
top:0;left:0;
z-index:70;
overflow:auto;
}
.box {
 margin: 0 auto;
 width: 400px;
 padding: 50px;
 background: white;
 padding-bottom:100px;
 font: 14px/2.2 Georgia, Serif;
 }

JavaScript Фиксы

В Файрфоксе "фокус", по умолчанию, направлен на элемент body при загрузке страницы. Это означает, что при нажатии на пробел страница опустится до body, и у нас появятся белые полосы. Чтобы это исправить, нам понадобится небольшой jQuery фикс. Он уберет "фокус" с элемента body и направит его на другой спрятанный элемент.

$(function(){
$(".box").prepend('<input type="text" id="focus-stealer" type="hidden" />');
$("#focus-stealer").focus();
});

Техника №2

В данном примере мы будем использовать CSS без каких-либо фиксов. Нам понадобится только инлайновое изображение с классом "bg”. Больше никакой другой разметки. Это большой плюс по сравнению с первой техникой.

Однако, данная техника не выполняет все требования, которые мы прописали в самом начале. Этот фон не будет центрирован в IE 7, не будет вообще работать в IE 6, и может иногда неправильно масштабироваться. Но все же это неплохой вариант.

img.bg {
min-height: 100%;
min-width: 1024px;
 /* Масштабирование*/
 width: 100%;
 height: auto;
 /* Позиционирование */
 position: fixed;
 top: 0;
 left: 0;
 }
@media screen and (max-width: 1024px){
 img.bg {
 left: 50%;
 margin-left: -512px; }
 }
div#content {
 
 /* Контент над фоном */
 position: relative; 
 
 width: 500px;
 margin: 0 auto;
 background: #fff;
 padding: 20px;
 font-family: helvetica, arial, sans-serif;
 font-size: 10pt;
 line-height: 16pt;
 -moz-box-shadow: #000 4px 4px 10px;
 -webkit-box-shadow: #000 4px 4px 10px;

 }
body {
 
 margin: 0;
 padding: 20px 0 0 0;
 }