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

SLITE

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

Наш фон будет:

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

Техника №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;
      }

Данный урок подготовлен для Вас командой сайта http://ruseller.com
Источник урока: www.css-tricks.com