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

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

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

Техника №1 + все файлы

demosourse

Техника №2

demo

Этого всего достичь очень трудно, поэтому нам придется немного попотеть и использовать множество разных техник для этого. Прежде всего, нам необходимо правильное масштабирование изображения. Традиционное 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;
}

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.css-tricks.com
Перевел: Максим Шкурупий
Урок создан: 24 Сентября 2009
Просмотров: 97870
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 24 Сентября 2009 21:51
    MOTORIST
    А можно без таблиц! Тема интересная, но было бы лучше без таблиц ))
  • 24 Сентября 2009 22:12
    Sonic
    В первой технике и скролл есть во всех браузерах и в Опере 10 прокручивается ниже бэкграунда.
  • 25 Сентября 2009 02:11
    MOTORIST
    Вертикальный скролл и должен быть (горизонтального нет). Насчет Оперы не порядок(.
  • 25 Сентября 2009 08:41
    Виталий
    Спасибо. Давно мучал этот вопрос.
  • 25 Сентября 2009 14:11
    ajan
    а нельзя просто через дивы например <div id="fon"></div> а сам код #fon { position:fixed; background-image:url(...); background-repeat:no-repeat; }
  • 25 Сентября 2009 14:32
    ajan
    точнее не гегче
  • 25 Сентября 2009 16:29
    МихаилГорюнов
    ajan, фон от этого не растянется. ------------------------------- Вобщем урок интересный, но есть свойства CSS для авто масштаба фона. И первая техника - отстой.
  • 27 Сентября 2009 22:16
    ГочаМахарадзе
    Vsegdа Interesno, Spasibo!
  • 3 Октября 2009 18:11
    Seiger
    Здрасвтуйте! Кто-нить просмотрел как исправить ошибки для ie?
  • 11 Декабря 2009 09:49
    Денис
    замысел очень интересный, а вот реализация сложная, по крайней мере для новичков (как я, например) немного переделав 2 способ, получил следующее: нужно добавить такой стиль <style> img.bg { width: 100%; height: 100%; position: fixed; top: 0; left: 0; } </style> и в самое начало документа добавить картинку <body> <img src="img/bg.jpg" class="bg"> впринципе всё.. у меня отлично работает (проверено в опере 9.64, IE8, FF 3.5) если картинка будет закрывать какие либо элементы сайта, можно добавить в стиль отрицательный z-index:-9999 (у меня лично с этим не было проблем.. полосы прокрутки по идее появляться не должны, но если всё же они каким то чудом появятся, то к тегу body можно добавить overflow:hidden правда это не действует в IE в режиме совместимости (кстати, если кто-то знает как с этим бороться, отпишитесь плиз на мыло Lunatik-90@yandex.ru)
  • 11 Декабря 2009 09:55
    Денис
    ах да, и ещё один минусик: если окно браузера растянуть всего на пол экрана, фон сжимается так же в 2 раза (по ширине) но учитывая то, что почти все бороздят просторы интернета в развернутом браузере или даже в полноэкранном режиме, то это можно не учитывать :)
  • 8 Января 2010 18:44
    Aliukas
    всем привет. кто нибудь знает как делаются такие страницы:http://www.upstruct.com/blog/
  • 15 Января 2010 20:38
    mikeoleynik
    русские символы не распознает, вместо них знаки вопроса в ромбе) подскажите что делать?
  • 28 Января 2010 22:09
    set
    народ, а тут кто-нить когда-нить правит ошибки? или дорабатывает уроки после выявления косяков? собсно, косяки в опере, как уже писалось, - страница скролится ниже скролла: http://taviskaron.com/for_web/ruseller.com/opera.png косяк в сафари - белые полосы сверху и снизу фона при определённых пропорциях окна: http://taviskaron.com/for_web/ruseller.com/safari.png
  • 17 Февраля 2010 03:24
    sova
    Когда все сделала в точности, как в уроке и в исходном коде демки, все получилось, как надо. Спасибо.
  • 3 Марта 2010 11:19
    sova
    "косяки в опере, как уже писалось, - страница скролится ниже скролла:" В Опере тот же баг. Как убрать? Может быть кто-нибудь знает?
  • 24 Июля 2010 18:41
    Artem
    Если у кого-то вместо кирилицы показывает квадраты или вопросы - смените кодировку файла на UTF-8 и всё будет нормально.
  • 2 Июня 2011 17:45
    andrewlab
    "<input type="text" id="focus-stealer" type="hidden" />" Разве инпут может иметь два типа?
  • 26 Июня 2011 02:32
    Woljer
    Есть еще баг в хром. Когда рассматривал 2 вариант то фон отъехал в правую сторону...
  • 12 Марта 2012 16:27
    Diamond_cat
    ммм а не слишком ли много заморочек? вот такой вариант, черновой но так на вскидку сделал, проверил под ие6 ие8 хром фф и опера работает, правда в ИЕ 6 есть один маленький косячок
    <style>
    body
    {
    padding: 0;
    margin: 0;
    width: 100%;
    height:100%;
    }
    .im
    {
    position:absolute;
    left:0px;
    top:0px;
    height:100%;
    width:100%;
    overflow:auto;
    z-index:0
    }
    </style>
    <body>
    <div class="im"><img src="2.jpg" style="position:absolute; left:0px; top:0px;
    width:100%; height:100%"/></div>
    <div class="im" style="z-index:2">
    <p>&nbsp;</p>
    <p>проверка скрола</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>vfdb</p>
    <p>проверка скрола</p>
    <p>проверка скрола</p>
    <p>nf</p>
    <p>g</p>
    <p>nfh</p>
    <p>nf</p>
    <p>n</p>
    <p>nf</p>
    <p>n</p>
    <p>h</p>
    <p>nf</p>
    <p>f</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>fng</p>
    <p>&nbsp;</p>
    <p>проверка скрола</p></div>
    </body>
    нормально ресайзит и скролирует текст, не забыть поставить
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    иначе в ИЕ будет бред
  • 29 Июля 2012 13:47
    idlein
    "mikeoleynik русские символы не распознает, вместо них знаки вопроса в ромбе) подскажите что делать?" Та же проблема, кто-нибудь может подсказать решение?
  • 19 Декабря 2012 16:19
    mescher
    Клево!
  • 29 Декабря 2012 03:19
    ViGer35
    Я у себя сделал попроще (не помню где нашел метод), CSS: html, body{ width:100%; min-width:1010px; } #bod { position: relative; width:1000px; margin:0 auto; z-index:100; } #fon{ height:100%; width:100%; z-index:1; min-width:1000px; } #fon img{ height:100%; width:100%; position: fixed; } HTML: <body> <div id="fon"> <img src="http://www.flowland.ru/image/fon/fon1.jpg" alt="" /> </div> <div id="bod"> ... контент ... </div> </body> только рисунок изначально должен быть большого разрешения, в идеале, не меньше максимального разрешения самого большого монитора, чтобы гарантированно не появлялась "зернистость". Посмотреть можно здесь: http://www.flowland.ru
  • 16 Сентября 2013 05:27
    dogmaone
    чёткий урок
^ Наверх ^