Admin | Дата: Четверг, 05-Дек-2013, 15:57:51 | Сообщение # 1 |
Admin
Группа: Администраторы
Сообщений: 118
Репутация: 1
Статус: Offline
|
Требования
* Заполняет всю страницу с изображением, без пробелов * Сохраняет пропорции изображения * Нет полосы прокрутки * Кросс-браузерность * Не Flash
Способ №1
картинка находится внутри нескольких «оболочек»:
HTML:
Код <div id="bg"> <div> <table cellspacing="0" cellpadding="0"> <tr> <td> <img src="images/bg.jpg" alt=""/> </td> </tr> </table> </div> </div>
CSS:
Код * { margin: 0; padding: 0; } html, body, #bg, #bg table, #bg td { height:100%; width:100%; overflow:hidden; } #bg { position: fixed; } #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%;
Чтобы разместить контент, добавим ещё один блок:
HTML:
Код <div id="cont"> <div class="box"> <!-- контент здесь --> </div> </div>
CSS:
Код #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; }
JAVASRCIPT ФИКС
Для IE6 может потребоваться добавить немного MooTools для фиксации В FF по умолчанию Focus находится на body-элементе при загрузуке страницы. При нажатии пробела могут вызникнуть некрасивые белые полосы внизу страницы. Чтобы этого избежать, добавьте следующий jQuery-код для скрытого элемента:
Код $(function(){ $(".box").prepend('<input type="text" id="focus-stealer" type="hidden" />'); $("#focus-stealer").focus(); };);
Баги в Safari 4 и Chrome, min-height не подгоняется
Способ №2
Это решение более лёгкое, без лишней нагруженности кодом. Но и недостатки есть — фон не центрируется в IE7, не работает вообще в IE6, и не всегда пропорциональна. Но это погрешность от простоты кода. Картинка находится просто в классе img.bg со свойством inline. Итак:
Код <body> <img src="images/bg.jpg" class="bg" /> <div id="content"> <!--тут контент--> </div> </body>
CSS:
Код img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } div#content { /* This is the only important rule */ /* We need our content to show up on top of the background */ position: relative; /* These have no effect on the functionality */ 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 { /* These rules have no effect on the functionality */ /* They are for styling only */ margin: 0; padding: 20px 0 0 0; }
|
|
| |